javascript - 如何删除在 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 block 。这是代码:

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

每当用户按下 block 左侧的“删除”链接时，应删除相应的 block 。这就是我所做的:

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

问题是只有原始 block 中的删除有效，其余的没有。有人知道为什么吗？

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

Answer 1

因为它是动态内容，你不能像静态内容那样绑定(bind)事件，它不会绑定(bind)到元素，因为它们在你绑定(bind)的时候没有出现。

所以你应该像这样绑定(bind)事件:

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