刪除動態創建div與jquery

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

1）您需要使用event delegation在這裏，因爲它已被動態添加到DOM到click事件綁定到您的按鈕。

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

Answer 3

，您可以嘗試。

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