How To Add Child Element Using Javascript/jquery
I need one help. I need to add the child element using button click in Javascript/Jquery.I am explaining my code below.
Solution 1:
I think this should help
Edited with look of '+' '-' buttons you asked for:
<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><h1>Hello</h1><divclass="form-group"id="intro-box"><inputtype="text"style="width:85%;float:left;margin-bottom:5px;"class="form-control"id="introlabelname0"name="introlabelname"placeholder="Label Name"value=""><inputtype="button"class="btn btn-success btn-sm"name="plus"id="plus"value="+"style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"onclick="addMore(1);"></div><script>
function addMore(i) {
$("#plus").remove();
$('#intro-box').append('<div><inputtype="text"style="width:85%;float:left; margin-bottom:5px;"class="form-control"id="introlabelname' + i + '"name="introlabelname"placeholder="Label Name"value="">' +
'<inputtype="button"onclick="removeThis(' + i + ');"class="btn btn-danger btn-sm"name="minus"id="minus' + i + '"value="-"style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"></div>' +
'<div><inputtype="button"class="btn btn-success btn-sm"name="plus"id="plus"value="+"style="font-size:21px; line-height:12px; border-radius:4px; margin:3px; margin-bottom:6px;"onclick="addMore(' + (i++) + ');"></div>');
}
function removeThis(j) {
$("#introlabelname" + j).remove();
$("#minus" + j).remove();
}
</script></body></html>Solution 2:
Same thing, using .clone(). Be aware of changes to the HTML to add a div that identifies the elements to clone as a "template" and removal of your onclick
functioninit() {
$(document).on('click', '.btn-success', function() {
var clone = $('#template').clone();
$('#intro-box').append(clone);
clone.find('.btn-danger').show();
});
$(document).on('click', '.btn-danger', function() {
$(this).parent().remove();
});
}
$(init);<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><divclass="form-group"id="intro-box"><divid="template"><inputtype="text"style="width:85%;float:left; margin-bottom:5px;"class="form-control"id="introlabelname"name="introlabelname1"placeholder="Label Name"value=""><inputtype="button"class="btn btn-success btn-sm"name="minus"id="plus"value="+"style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;"><inputtype="button"class="btn btn-danger btn-sm"name="minus"id="minus"value="-"style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;"></div></div></body>Solution 3:
Use .ready(), define addMore function within .ready() handler; substitue .click() for attribute event handler onclick; attach click event to #minus element; check .length of "[name=introlabelname]" elements at click of both #plus, #minus elements; pass boolean result to .toggle()#minus button if elements .length is not greater than 1 at click at #minus button; remove last "[name=introlabelname]" element at click of #minus element; substitute class="form-control introlabelname" for id="introlabelname"
<!DOCTYPE html><html><head><scriptdata-require="jquery@*"data-semver="3.0.0"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script><linkdata-require="bootstrap@*"data-semver="4.0.0-alpha.2"rel="stylesheet"href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /><scriptdata-require="bootstrap@*"data-semver="4.0.0-alpha.2"src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script><linkrel="stylesheet"href="style.css" /><scriptsrc="script.js"></script></head><body><h1>Hello</h1><divclass="form-group"id="intro-box"><inputtype="text"style="width:85%;float:left; margin-bottom:5px;"class="form-control introlabelname"name="introlabelname"placeholder="Label Name"value=""><inputtype="button"class="btn btn-success btn-sm"name="minus"id="plus"value="+"style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;"><inputtype="button"class="btn btn-danger btn-sm"name="minus"id="minus"value="-"style="font-size:21px; line-height:12px; border-radius:4px; margin-right:2px;margin-left:2px;margin-top:6px;display:none;"></div><script>// Code goes here
$(function() {
functiontoggle() {
$("#minus").toggle($("[name=introlabelname]").length > 1);
}
functionaddMore() {
$('#intro-box').append('<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">');
toggle()
}
functionremoveOne() {
$("[name=introlabelname]").last().remove()
toggle()
}
$("#plus").click(addMore);
$("#minus").click(removeOne)
})
</script></body></html>Solution 4:
Read this http://www.w3schools.com/howto/howto_js_todolist.asp
Now that you want to create an input field with a different id, you can set a new variable to do that.
for example:
one script tag:
var n=1;
Another script tag:
document.getElementByid("btn").addEventListener("click",add(),false);
functionadd(){
var id="identity"+n.toString();
//converts n to string and adds it to identitydocument.getElementByTagName("div").innerHTML+="<input type='text' id='"+id+"'/>";
n++;
}
I didn't test this code. But you try something similar to this.
Post a Comment for "How To Add Child Element Using Javascript/jquery"