Detect when a node is deleted (or removed from the DOM because a parent was)

Question

I want to detect when a node (nodeX, say) is no longer available, either because it was deleted or because its parent (or its parents parent) was deleted.

So far, all I can think of is to use Mutation Observer to see any deletions on the page, and check if the deleted nodes was nodeX or had nodeX for a descendant.

Is there an easier way?

Please note: as far as I understand, the linked question (that this question "is a duplicate of") asks "how can I detect a [direct] deletion of a node". Mine asks "How can I detect the deletion of a node or its parent (or any other ancestor)".

As far as I understand, this is not straightforward with mutation observers: You need to check every deleted node to see if it was an ancestor.

This is what I seek to confirm or deny.

As far as I understand, that is different from the linked question.

Yes. I read the docs and tried what seemed to be the resonable guesses. Maybe there is something I missed or misunderstood — josinalvo, Jul 05 '17 at 21:06
(note that I am not claiming the way I proposed is too complex. I just wonder if there is a more straightforward way) — josinalvo, Jul 05 '17 at 21:07
Keep track of nodes by storing them in an array, then use `.map()` which makes a copy of the original array and returns the modified array. That way you'll have the original array and an array that is either made of all removed nodes or all nodes remaining. — zer00ne, Jul 05 '17 at 21:13
either mutation observers, or repeating timeouts that check for the element (*mutation observers being the right choice if supported*) — Gabriele Petrioli, Jul 05 '17 at 21:15
@dandavis mutation events are deprecated. (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events) — Gabriele Petrioli, Jul 05 '17 at 21:18
@GabyakaG.Petrioli edited the question to clarify. The question is, exactly, 'do I need to watch all deletions, and then check if deleted nodes were ancestors, or not'. The "duplicate" is just how to watch deletions (as far as I can tell) — josinalvo, Jul 05 '17 at 21:58
@josinalvo do you want to identify the actual parent that was removed or just know if the target node was removed regardles of how it happened ? — Gabriele Petrioli, Jul 05 '17 at 22:00

score 13 · Accepted Answer · answered Jul 05 '17 at 22:44

Here is an implementation that identifies how the element was removed (either directly or because a parent was removed)

var target = document.querySelector('#to-be-removed');

var observer = new MutationObserver(function(mutations) {
  // check for removed target
  mutations.forEach(function(mutation) {
    var nodes = Array.from(mutation.removedNodes);
    var directMatch = nodes.indexOf(target) > -1
    var parentMatch = nodes.some(parent => parent.contains(target));
    if (directMatch) {
      console.log('node', target, 'was directly removed!');
    } else if (parentMatch) {
      console.log('node', target, 'was removed through a removed parent!');
    }

  });
});

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


var qs = document.querySelector.bind(document);
qs('#ul').addEventListener('click', function(){qs('ul').remove();}, false)
qs('#li').addEventListener('click', function(){qs('#to-be-removed').remove();}, false)

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="to-be-removed">list item 3</li>
  <li>list item 4</li>
</ul>

<button id="ul">remove ul</button>
<button id="li">remove li</button>

DAR · Answer 2 · 2017-08-18T19:05:28.757

The accepted answer will fail if the removed subtree is mutated after removal from the document. For example:

target.parent.remove();
target.remove();

will generate one call to the mutation observer for the parent node removal (the target node removal will not be reported to the observer as it happened when the subtree was already removed from the document).

var parentMatch = nodes.some(parent => parent.contains(target));

in the accepted answer will return false as the target is no longer a child. The problem is that mutation event reporting is batched and you cannot rely on state at the time of node removal staying the same as at the time of the call to your mutation observer.

For this reason, facing a similar issue as the questioner, I created a WeakSet of target node ancestors. Using a mutation observer attached to the document root, I compared mutations against this set and the target. If a mutation node removal event includes a node in this set or the target node, I know the target node was removed from the tree. That doesn't imply the node is still removed (it may have been added back) or that the node is still a child of the ancestors in my set. But I can be sure that the node was removed in the past.

You have to be careful to differentiate DOM state at the moment after a mutation and the state at the time you receive the mutation event.

score 1 · Answer 3 · answered Jul 05 '17 at 21:13

This has been asked before on stack overflow. How to detect element being added/removed from dom element?

If you just want to check whether something exists at a particular point in time, you could obviously do something like:

if (!document.querySelector(".nonexistent")) {
  console.log("doesn't exist");
}

Otherwise Mutation Observers are your only option.

Detect when a node is deleted (or removed from the DOM because a parent was)

3 Answers3

Linked