如何刪除在 Javascript 中動態添加的元素

Question

我有以下代碼來創建一些元素：

<div id="parent">
    <div id="block_1" >
        <div>
          <input type="text">
        </div>
        <img src="arrow.jpg">
        <div>
          <input type="text">
        </div>
        <div><a href="#" class="remove_block">Remove</a></div>
    </div>
</div>

結果如下所示：

當用戶按下 ADD 按鈕時，它將轉到 Javascript 函數並創建相同的 div 塊。 這是代碼：

function add_block() {
var curDiv = $('#parent');
var i = $('#parent div').size()/4 + 1;
var newDiv='<div id="block_'+ i + '" class="parent_div">' +
'<div>' +
'<input type="text">' +
'</div>' +
'<img src="arrow.jpg">' +
'<div>' +
'<input type="text">' +
'</div><div><a class="remove_block" href="#">Remove</a></div>' +
'</div>';
$(newDiv).appendTo(curDiv);
};

每當用戶按下塊左側的“刪除”鏈接時，應刪除相應的塊。 這就是我所做的：

$('a.remove_block').on('click',function(events){
   $(this).parents('div').eq(1).remove();
});

問題是只有原始塊中的 remove 起作用，其余的沒有。 有人知道為什么嗎？

我是 jQuery 和 Javascript 的新手，所以我非常感謝任何幫助和建議 注意：我使用 jQuery 2.0.3

Answer 1

因為它是動態內容，你不能像靜態內容那樣綁定事件，它不會綁定到元素，因為它們在你綁定時沒有出現。

所以你應該像這樣綁定事件：

$('#parent').on('click', 'a.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});

Answer 2

您需要對動態添加的元素使用事件委托。 即使您使用了.on()所使用的語法也不使用事件委托。

當您注冊普通事件時，它僅將處理程序添加到當時存在於 dom 中的那些元素，但是當使用事件委托時，處理程序將注冊到執行時存在的元素，並評估傳遞的選擇器當事件冒泡到元素時

$(document).on('click', '.remove_block', function(events){
   $(this).parents('div').eq(1).remove();
});

Answer 3

$('a.remove_block').on('click',function(events){
  $(this).parents('.parent_div').remove();
  return false;
});

Answer 4

我遇到過要刪除的動態元素不是我的事件偵聽器的后代的情況：

siteSel.on('select2:select', function (e) {
      // remove some other dynamic element on page.
});

我發現的解決方案是使用when()方法。

siteSel.on('select2:select', function (e) {
      let dynamicElement = $('.element');
      $.when(dynamicElement).then(dynamicElement.remove());
});

Answer 5

您可以為此使用 .live：

$('body').live('click','#idDinamicElement', function(){
   // your code here
});