prototype -当元素从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);
        }
    });
}

在这种情况下，它接受一个可选的数组对象作为参数，该参数将被所有观察者对象填充(只有当你想要能够停止对任何给定项目的监视时，才需要传递这个参数)。