如何在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>

结果看起来像这样：

当用户按下“添加”按钮时，它将进入一个Javascript函数并创建一个相同的

块。以下是代码：

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

问题在于只有原始块中的移除起作用，而其他块不起作用。 有人知道为什么吗？

我是jQuery和Javascript的新手，因此非常感谢任何帮助和建议 注意：我使用jQuery 2.0.3

- Nexus

Answer 1

因为它是动态内容，所以无法像静态内容一样绑定事件，它不会绑定到元素上，因为它们在你绑定时还不存在。

因此，你应该像这样绑定事件：

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

- Chokchai

---

你认为这是否应该成为绑定所有点击链接的标准做法？ - Austin

Answer 2

你需要为动态添加的元素使用事件委托，尽管你已经使用了.on()，但所使用的语法并没有使用事件委托。

当您注册普通事件时，它仅将处理程序添加到在该时间点存在于DOM中的那些元素上，但是当使用事件委托时，处理程序将被注册到在执行时存在的元素上，并且当事件冒泡到该元素时，传递的选择器会被评估。

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

- Arun P Johny

Answer 3

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

- Adrian

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

- Rmy5

Answer 5

你可以使用 .live 来实现这个功能：

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

- Walter Gandarella