使用 jquery 删除动态创建的 div

Question

编辑：这样我下次会更好地提问。我得到-1 我做错了什么？

我正在动态添加很多 html，并希望能够一一删除它们。

在 JQuery 下方。我希望能够通过单击其下方的删除按钮来删除整个 $("#row1' + (counter) + '") div，包括其中的所有 div。

这是一个小提琴：http://jsfiddle.net/FullContCoder/Sf9r5/1/

提前非常感谢！

$(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);
    });




});

Answer 1

您应该使用event delegation 将事件添加到动态创建的元素。并使用.closest() 获取与选择器匹配的第一个元素。试试这个：

$(document).on('click','.removeButton',function() {
     $(this).closest("div.row").remove();
});

您需要将删除按钮 click 处理程序移到添加按钮 click 处理程序之外。

DEMO

Answer 2

你可以试试。

$(document).on('click', '.removeButton', function(){
    $('#row1' + counter).remove();
});

Answer 3

1) 您需要在此处使用 event delegation 将click 事件绑定到您的按钮，因为它已被动态添加到 DOM。

2) 使用 .closest() 删除最接近的匹配祖先 .row 并在此处删除多余的 counter 变量：

3) 您还需要将删除按钮的click 处理程序移到添加按钮的click 处理程序之外。

最终代码应如下所示：

$(document).ready(function () {
    $(".addButton").click(function () {
        var test = .....
        $("#row1").after(test);
    });

    $('.removeButton').click(function () {
        $(this).closest(".row").remove();
    });
});

Updated Fiddle