当元素从DOM中移除时触发事件

我试图弄清楚如何执行一些js代码时，一个元素从页面删除:

jQuery('#some-element').remove(); // remove some element from the page
/* need to figure out how to independently detect the above happened */

有没有专门的活动，比如:

jQuery('#some-element').onremoval( function() {
    // do post-mortem stuff here
});

当前回答

挂钩.remove()并不是最好的处理方法，因为有很多方法可以从页面中删除元素(例如，通过使用.html()， .replace()等)。

为了防止各种内存泄漏危险，jQuery将在内部尝试为每个被删除的元素调用jQuery. cleandata()函数，而不管使用什么方法来删除它。

查看这个答案了解更多细节:javascript内存泄漏

所以，为了得到最好的结果，你应该钩子cleanData函数，这正是jquery.event.destroyed插件所做的:

http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js

2011-11-03 00:50:13

其他回答

我不确定是否有此事件句柄，因此您必须保留DOM的副本，并在某种轮询循环中与现有DOM进行比较——这可能相当麻烦。Firebug可以做到这一点——如果您检查HTML并运行一些dom更改，它会在Firebug控制台中以黄色高亮显示更改。

或者，你可以创建一个删除函数…

var removeElements = function(selector) {
    var elems = jQuery(selector);

    // Your code to notify the removal of the element here...
    alert(elems.length + " elements removed");

    jQuery(selector).remove();
};

// Sample usage
removeElements("#some-element");
removeElements("p");
removeElements(".myclass");

2010-02-04 14:52:27

没有用于删除元素的内置事件，但是可以通过伪扩展jQuery的默认删除方法来创建一个事件。注意，必须在实际删除回调以保持引用之前调用回调。

(function() {
    var ev = new $.Event('remove'),
        orig = $.fn.remove;
    $.fn.remove = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

$('#some-element').bind('remove', function() {
    console.log('removed!');
    // do pre-mortem stuff here
    // 'this' is still a reference to the element, before removing it
});

// some other js code here [...]

$('#some-element').remove();

注意:这个答案的一些问题已经被其他的帖子概括出来了。

当通过html() replace()或其他jQuery方法删除节点时，这将不起作用这个事件出现了 jQuery UI覆盖删除以及

这个问题最优雅的解决方案似乎是:https://stackoverflow.com/a/10172676/216941

2010-02-04 15:32:19

你可以绑定到DOMNodeRemoved事件(DOM Level 3 WC3规范的一部分)。

适用于IE9，最新版本的Firefox和Chrome。

例子:

$(document).bind("DOMNodeRemoved", function(e)
{
    alert("Removed: " + e.target.nodeName);
});

您还可以通过绑定到DOMNodeInserted来获得元素插入时的通知

2011-08-08 19:27:33

对于那些使用jQuery UI的人:

jQuery UI已经覆盖了一些jQuery方法来实现remove事件，该事件不仅在你显式删除给定元素时被处理，而且在元素被任何自清理jQuery方法(例如replace, html等)从DOM中删除时也会被处理。这基本上允许您在jQuery“清理”与DOM元素相关的事件和数据时，将钩子放入相同的事件中。

John Resig表示，他愿意在未来版本的jQuery核心中实现这个事件，但我不确定它目前的位置。

2011-09-28 19:04:56