прототип - событие триггера, когда элемент удаляется из 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); 
     } 
    }); 
} 

В этом случае он принимает необязательный объект массива в качестве аргумента, который будет заполнен всеми объектами наблюдателей (только необходимые для передачи этого если вы хотите иметь возможность остановить просмотр себя на любом заданном элементе).