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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello</h1>
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left;margin-bottom:5px;" class="form-control" id="introlabelname0" name="introlabelname" placeholder="Label Name" value="">
<input type="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><input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname' + i + '" name="introlabelname" placeholder="Label Name" value="">' +
'<input type="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> <input type="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
function init() {
$(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);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="form-group" id="intro-box">
<div id="template">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control" id="introlabelname" name="introlabelname1" placeholder="Label Name" value="">
<input type="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;">
<input type="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>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello</h1>
<div class="form-group" id="intro-box">
<input type="text" style="width:85%;float:left; margin-bottom:5px;" class="form-control introlabelname" name="introlabelname" placeholder="Label Name" value="">
<input type="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;">
<input type="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() {
function toggle() {
$("#minus").toggle($("[name=introlabelname]").length > 1);
}
function addMore() {
$('#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()
}
function removeOne() {
$("[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);
function add(){
var id="identity"+n.toString();
//converts n to string and adds it to identity
document.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"