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

Question

我试图弄清楚当从页面中删除元素时如何执行一些 js 代码：

原型中的一些东西：

$('custom-div').observe('remove', function(event) {
    // Handle the event
});

这样的事情存在吗？

Answer 1

在现代浏览器中，您可以使用MutationObserver。下面的代码会在 DOM 元素从当前位置移除时调用回调：

function watchRemove(el, fn) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            var item;
            if (mutation.type === "childList" && mutation.removedNodes) {
                for (var i = 0; i < mutation.removedNodes.length; i++) {
                    item = mutation.removedNodes[i];
                    if (item === el) {
                        // clear the observer
                        observer.disconnect();
                        fn.call(item, item);
                        break;
                    }
                }
            }
      });    
    });
    observer.observe(el.parentNode, {childList: true});
    return observer;
}

还有一个工作演示：http://jsfiddle.net/jfriend00/naft3qeb/

这会监视父级对其直接子级的更改，并在传入的特定 DOM 元素被删除时调用回调。

当移除 DOM 元素或 watchRemove() 返回观察者实例时，观察者将自行移除，您可以随时调用 .disconnect() 来停止观察。

这是一个使用此功能的 jQuery 插件：

jQuery.fn.watchRemove = function(fn, observers) {
    return this.each(function() {
        var o = watchRemove(this, fn);
        if (observers) {
            observers.push(o);
        }
    });
}

在这种情况下，它接受一个可选的数组对象作为参数，该参数将填充所有观察者对象（只有在您希望能够停止对任何给定项目的观察时才需要传递它）。