Javascript 使用jquery删除动态创建的div
编辑:这样下次我问的问题会更好。我得了-1我做错了什么 我正在动态添加大量html,并希望能够逐个删除它们 在JQuery下面。我希望能够通过单击它下面的“删除”按钮删除整个$(“#row1'+(counter)+')div,包括其中的所有div 这是一把小提琴: 提前多谢Javascript 使用jquery删除动态创建的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,编辑:这样下次我问的问题会更好。我得了-1我做错了什么 我正在动态添加大量html,并希望能够逐个删除它们 在JQuery下面。我希望能够通过单击它下面的“删除”按钮删除整个$(“#row1'+(counter)+')div,包括其中的所有div 这是一把小提琴: 提前多谢 $(document).ready(function() { var counter = 0; $(".addButton").click(function() { var test =
$(document).ready(function() {
var counter = 0;
$(".addButton").click(function() {
var test = $( '<div id="row1' + (counter) + '" class="row"><div class="col-md-2"><p><small>Placement Name:</small></p><input id="inputPlacement' + (counter) + '" type="text" class="form-control input-sm" name="placementName" placeholder="ex: Homepage">' +
'</div><div class="col-md-3"><p><small>URL:</small></p><input id="inputURL" type="url" class="form-control input-sm" name="url" placeholder="ex: http://www.allure.com"></div>' +
'<div class="col-md-2"><div class="row"><div class="col-md-12"><p><small>Select a Date and Time:</small></p></div></div><div class="row"><div class="col-md-12">' +
'<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" readonly=""><span class="add-on"><i class="icon-calendar"></i>' +
'</span></div></div></div><div class="row"><div class="input-append bootstrap-timepicker"><input id="timepicker1" type="text" class="input-small"><span class="add-on">' +
'<i class="glyphicon glyphicon-time"></i></span></div></div></div><div class="col-md-2"><p><small>Recurring:</small></p><select id="recurring" class="form-control input-sm">' +
'<option name="daily" value="daily">Daily</option><option name="weekly" value="weekly">Weekly</option><option name="month" value="month">Month</option></select></div>' +
'<div class="col-md-2"><p><small>Day of Week:</small></p><div class="row"><div class="col-md-6"><label class="checkbox-inline"><input id="mon" name="test" type="checkbox" value="1"> Mon</label>' +
'</div><div class="col-md-6"><label class="checkbox-inline"><input id="fri" name="test" type="checkbox" value="1"> Fri</label></div></div><div class="row"><div class="col-md-6">' +
'<label class="checkbox-inline"><input id="tue" name="test" type="checkbox" value="1"> Tue</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sat" name="test" type="checkbox" value="1"> Sat</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="wen" name="test" type="checkbox" value="1"> Wed</label></div><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="sun" name="test" type="checkbox" value="1"> Sun</label></div></div><div class="row"><div class="col-md-6"><label class="checkbox-inline">' +
'<input id="thu" name="test" type="checkbox" value="1"> Thu</label></div></div></div><div class="col-md-1"><p><small>Remove:</small></p>' +
'<button type="button" class="removeButton btn btn-default btn-sm"><span class="glyphicon glyphicon-minus-sign"></span></button></div></div>' )
$('.removeButton').click(function() {
$("#row1' + (counter) + '").remove();
});
counter++;
$("#row1").after(test);
});
});
$(文档).ready(函数(){
var计数器=0;
$(“.addButton”)。单击(函数(){
var test=$(“位置名称:”+
“URL:”+
“选择日期和时间:”+
'' +
'' +
“经常性:”+
“每日周刊”+
“星期几:Mon”+
“星期五”+
“星期二”+
“Sat”+
“Wed”+
“太阳”+
“Thu删除:”+
'' )
$('.removeButton')。单击(函数(){
$(“#行1'+(计数器)+'”)。删除();
});
计数器++;
$(“第1行”)。在(测试)之后;
});
});
1)您需要在此处使用将单击事件绑定到按钮,因为它已动态添加到DOM中
2) 使用删除最接近的匹配祖先。行
,并删除冗余的计数器
变量:
3) 您还需要将删除按钮的单击处理程序移动到添加按钮的单击处理程序之外
最终代码应如下所示:
$(document).ready(function () {
$(".addButton").click(function () {
var test = .....
$("#row1").after(test);
});
$('.removeButton').click(function () {
$(this).closest(".row").remove();
});
});
你可以试试
$(document).on('click', '.removeButton', function(){
$('#row1' + counter).remove();
});
您应该使用将事件添加到动态创建的元素中。和用于获取与选择器匹配的第一个元素。试试这个:
$(document).on('click','.removeButton',function() {
$(this).closest("div.row").remove();
});
您需要将删除按钮单击
处理程序移动到添加按钮单击
处理程序之外
更新了你的代码,但没有达到目的:谢谢!我希望我能奖励更多的人正确答案,所以我选择了最快的。真不敢相信答案来得这么快。在我的例子中,我需要删除前面的选择菜单和删除按钮本身:$(文档)。在('click','.removesection',function(){$(this.prev().remove();$(this.remove();})代码>