Javascript DOM add/remove events

Question

I'm hoping to do some cleanup job when an element is removed from the DOM tree, more specifically, ParentElement.removeChild(ChildElement). I'm wondering whether there's any event being emitted that I can listen in my code when the ChildElement is removed?

Answer 1

Yes, you can listen for manipulations to the DOM using a MutationObserver.

Example from the MDN docs:

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 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);

// Later, you can stop observing
observer.disconnect();

Answer 2

Previously you could use mutation events like DOMNodeRemoved which were deprecated in favour of MutationObserver:

var observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    const removedNodes = mutation.removedNodes;
    // Cast NodeList to Array to have access to .includes method
    if (Array.from(removedNodes).includes(childElement)) {
      console.log('childElement removed');
    }
  })
});

observer.observe(document.getElementById('parentElement'), {
  childList: true
});