[英]how to remove multiple div element generated by onclick using jquery
i can add a div content using on-click and can generate it multiple or more but i also want to remove that generated div when a user click remove button. 我可以使用单击添加div内容,并且可以生成多个或更多内容,但是我还想在用户单击“删除”按钮时删除该生成的div。 I have tried some but it only remove once.
我已经尝试了一些,但只删除了一次。 If i generated one on-click then it removed when i click remove but when i generated two or more it does not work.
如果我生成了一个单击,则在单击删除时将其删除,但是当我生成两个或更多时,它将不起作用。
$(document).ready(function() { $("button[name='addDom']").click(function() { var domElement = $('<div class="row " id="removechild"><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button onclick="clearBox()" class="btn btn-danger">Remove Child</button><hr>'); $(this).after(domElement); }); }); function clearBox(removechild) { document.getElementById('removechild').innerHTML = ""; } $("#removechild").html("");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button name="addDom" class="btn btn-warning"> Add Child</button>
$(document).ready(function() { $("button[name='addDom']").click(function() { var domElement = $('<div class="child"><div class="row "><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button class="removeChild" class="btn btn-danger">Remove Child</button><hr></div>'); $(this).after(domElement); }); $(document).on('click','button.removeChild',function(){ $(this).closest('div.child').remove(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button name="addDom" class="btn btn-warning"> Add Child</button>
Inside your addDom click add this code 在您的addDom中,单击添加此代码
var domElement = $('<div class="child"><div class="row "><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button class="removeChild" class="btn btn-danger">Remove Child</button><hr></div>');
$(this).after(domElement);
And outside that paste this 然后在外面贴上
$(document).on('click','button.removeChild',function(){
$(this).closest('div.child').hide();
});
It will work! 会工作的!
Try this: 尝试这个:
$('addBtn').click(function(){
var $div = $('<div class="test">...</div>');
$(this).after($div);
})
$('.removeBtn').click(function(){
var $div = $('.test').last();
$div.length && $div.remove();
})
You should wrap your form into a div then delete the div like this: 您应该将表单包装成div,然后像这样删除div:
var id = 0; $(document).ready(function() { $("button[name='addDom']").click(function() { var domElement = $('<div class="rowItem"><div class="row" id="removechild"><hr><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">First Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="first_name" placeholder="First Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Last Name</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="last_name" placeholder="Last Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Gender</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"> <option value="">Male</option><option value="">Female</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Date of Birth</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="date" class="form-control" id="exampleInputDOB1" placeholder="Date of Birth" required="required" style="width:124%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Class Coordinator (if applicable)</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="class_coordinator" placeholder="Class Coordinator Name" class="form-control" type="text" required="required" style="width:200%"></div></div></div></div><div class="col-md-6 col-lg-6"><div class="form-group"><label class="col-md-4 control-label">School Currently Attending</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="school" placeholder="School Currently Attending" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Relation with child</label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input name="relation" placeholder="Relation with child" class="form-control" type="text" required="required" style="width:200%"></div></div></div><div class="form-group"><label class="col-md-4 control-label">Types of soccercric</label><div class="col-md-4 selectContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span><select name="gender" class="form-control selectpicker"><option value="">Soccer</option><option value="">Cricket</option></select></div></div></div><div class="form-group"><label class="col-md-4 control-label">Child medical condition <br> <span style="font-size:10px">Please indicate any relevant medical conditions or allergies your child may have (not required if your child has no relevant medical issues)</span></label><div class="col-md-4 inputGroupContainer"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input name="relation" placeholder="Child medical condition" class="form-control" type="text" required="required" style="width:200%"></div></div></div</div</div><br><br><br><button onclick="clearBox(this)" class="btn btn-danger">Remove Child</button><hr></div>'); $(this).after(domElement); }); }); function clearBox(removeChild) { $(removeChild).parentsUntil('.rowItem').html(''); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button name="addDom" class="btn btn-warning"> Add Child</button>
I am using jQuery's parentsUntil to get the wrapping div and delete all item inside the div. 我正在使用jQuery的ParentsUntil来获取包装div并删除div中的所有项目。
You need to assign a unique ID then provide this unique ID in the clearBox function. 您需要分配一个唯一的ID,然后在clearBox函数中提供此唯一的ID。
$(document).ready(function() {
var count = 0;
$("button[name='addDom']").click(function() {
var uniqueID = "removechild-" + count,
html = '<div class="row" id="' + uniqueID + '">row of stuff<button onclick="clearBox(\'' + uniqueID + '\')" class="btn btn-danger">Remove Child</button></div>';
$(this).after(html);
count++;
});
});
function clearBox(idToRemove) {
document.getElementById(idToRemove).innerHTML = "";
}
CodePen example: https://codepen.io/JoeHastings/pen/dWzwMB CodePen示例: https ://codepen.io/JoeHastings/pen/dWzwMB
As mentionned by myself and @guradio in the comments your ID should be unique. 正如我自己和@guradio在评论中提到的那样,您的ID应该是唯一的。 The easiest way to do this would be to have a global integer variable which is appending to each elements ID and then incremented:
最简单的方法是使全局整数变量附加到每个元素ID上,然后递增:
var elemIndex = 0;
createElement(){
var newId = "someElement" + elemIndex;
var domElement = '<div id="'+ newId +'"'>...</div>';
}
Your delete button click should then call the clearBox
method, padding the unique ID (looks like your method has started to support this with the parameter): 单击删除按钮,然后应调用
clearBox
方法,并填充唯一ID(看起来您的方法已开始使用参数支持此方法):
clearBox(elementId){
document.getElementById(elementId).innerHtml = "";
}
And the button (as it would appear when building the element string): 和按钮(在构建元素字符串时将出现):
var domElement = '...<button type="button" onclick="clearBox('+ newId +')">Clear</button>...';
You can achieve this by using Jquery Traversing. 您可以使用Jquery Traversing实现此目的。 Corresponsing parent div can be removed on click of the remove Button.
单击删除按钮可以删除对应的父div。 Refer this Jsfiddle Link.
请参阅此Jsfiddle链接。
$(document).on( "click", ".removeBtn", function() {
$(this).parent().parent().parent().remove();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.