Событие DOM, когда элемент удален

Есть ли способ получить уведомление, когда элемент удален из DOM, либо напрямую, либо как часть поддерева ? Кажется, что единственные доступные методы - это просто удаленные узлы, но я хотел бы получить уведомление, когда удаляется целое поддерево, содержащее мой узел.

РЕДАКТИРОВАТЬ

Кажется, проблема была не совсем ясна, поэтому я сделал вызов: https://jsbin.com/winukaf

DOM выглядит так:

<body>
  <div class="root">
    <div class="great-grand-parent">
      <div class="grand-parent">
        <div class="parent">
          <div class="leaf">
            Am I still here?
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

и задача состоит в том, чтобы уведомить, когда какой-либо один из элементов здесь удален, так как это удалит листовой узел из дерева DOM.

Всего 2 ответа


Существует API HTML5, называемый MutationObserver, и он имеет довольно хорошую поддержку

Вот пример:

// Element is the whatever subtree/element you need to watch over
var in_dom = document.body.contains(element);
var observer = new MutationObserver(function(mutations) {
    if (document.body.contains(element)) {
        if (!in_dom) {
            console.log("element inserted");
        }
        in_dom = true;
    } else if (in_dom) {
        in_dom = false;
        console.log("element removed");
    }

});
observer.observe(document.body, {childList: true, subtree: true});

Для этого вы должны использовать API MutationObserver . Вот пример MDN, адаптированный к простому сценарию:

 // Select the node that will be observed for mutations var targetNode = document.getElementsByClassName('root')[0]; // Options for the observer (which mutations to observe) var config = { childList: true, subtree: true }; // Callback function to execute when mutations are observed var callback = function(mutationsList, observer) { console.log('A child node has been added or removed.'); console.log(mutationsList[0]); }; // Create an observer instance linked to the callback function var observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); var subElement = document.getElementsByClassName('parent')[0]; var elementToRemove = document.getElementsByClassName('leaf')[0]; var anotherElement = document.getElementsByClassName('great-grand-parent')[0]; setTimeout(function() { subElement.removeChild(elementToRemove); }, 500); setTimeout(function() { targetNode.removeChild(anotherElement); }, 500); // Later, you can stop observing // observer.disconnect(); 
 <div class="root"> <div class="great-grand-parent"> <div class="grand-parent"> <div class="parent"> <div class="leaf"> Am I still here? </div> </div> </div> </div> </div> 


Есть идеи?

10000