jQuery 如何删除在javascript中动态添加的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19129794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove an element that is added dynamically in javascript
提问by Nexus
I have the following code to create some element
我有以下代码来创建一些元素
<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>
the result look like this
结果看起来像这样
When user presses the ADD button it will go to a javascript function and create the same block of div. Here is the code
当用户按下 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);
};
whenever the user press the "Remove" link on the left hand side of the block , that corresponding block should be removed. And this is what I did:
每当用户按下块左侧的“删除”链接时，应删除相应的块。这就是我所做的：
$('a.remove_block').on('click',function(events){
$(this).parents('div').eq(1).remove();
});
The problem is that only the remove in the original block work, the rest didn't . Anybody know why ?
问题是只有原始块中的 remove 起作用，其余的没有。有人知道为什么吗？
I am new to jQuery and javascript, so I really appreciate any help and suggestion Note: I use jQuery 2.0.3
我是 jQuery 和 javascript 的新手，所以我非常感谢任何帮助和建议 注意：我使用 jQuery 2.0.3
回答by Chokchai
Because it's dynamic content, you can't bind events like the static content, it will not bind to the elements because they don't appear at the time you bind.
因为它是动态内容，你不能像静态内容那样绑定事件，它不会绑定到元素，因为它们在你绑定时没有出现。
So you should bind event like this:
所以你应该像这样绑定事件：
$('#parent').on('click', 'a.remove_block', function(events){
$(this).parents('div').eq(1).remove();
});
回答by Arun P Johny
You need to use event delegation for dynamically added elements. Even though you have used .on()the syntax used does not use event delegation.
您需要对动态添加的元素使用事件委托。即使您使用.on()了所使用的语法，也不使用事件委托。
When you register a normal event it adds the handler to only those elements which exists in the dom at that point of time, but when uses event delegation the handler is registered to a element which exists at the time of execution and the passed selector is evaluated when the event is bubbled upto the element
当您注册普通事件时，它仅将处理程序添加到当时存在于 dom 中的那些元素，但是当使用事件委托时，处理程序将注册到执行时存在的元素，并评估传递的选择器当事件冒泡到元素时
$(document).on('click', '.remove_block', function(events){
$(this).parents('div').eq(1).remove();
});
回答by Adrian
$('a.remove_block').on('click',function(events){
$(this).parents('.parent_div').remove();
return false;
});
回答by Rmy5
I had the situation where the dynamic element to remove wasn't a descendant of my event listener:
我遇到过要删除的动态元素不是我的事件侦听器的后代的情况：
siteSel.on('select2:select', function (e) {
// remove some other dynamic element on page.
});
Solution I found was using when()method.
我发现的解决方案是使用when()方法。
siteSel.on('select2:select', function (e) {
let dynamicElement = $('.element');
$.when(dynamicElement).then(dynamicElement.remove());
});
回答by Walter Gandarella
You can use the .live for this:
您可以为此使用 .live：
$('body').live('click','#idDinamicElement', function(){
// your code here
});
