How to Detect Element Being Added/Removed from Dom Element

How to detect element being added/removed from dom element?

Use Mutation Observers as suggested by @Qantas in his answer

Following methods are deprecated

You can use DOMNodeInserted and DOMNodeRemoved

$("#parent").on('DOMNodeInserted', function(e) {
    console.log(e.target, ' was inserted');
});

$("#parent").on('DOMNodeRemoved', function(e) {
    console.log(e.target, ' was removed');
});

MDN Docs

DOM event when element is removed

There's a HTML5 API called MutationObserver and it has pretty good support

Here's an example:

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

Detect that given element has been removed from the DOM without sacrificing performance

As you said, MutationObserver only allows you to detect when the children of an element are manipulated. That means you'll need to listen to the parent and check what changes were made to see if the target element was removed.

function onRemove(element, callback) {
  const parent = element.parentNode;
  if (!parent) throw new Error("The node must already be attached");

  const obs = new MutationObserver(mutations => {
    for (const mutation of mutations) {
      for (const el of mutation.removedNodes) {
        if (el === element) {
          obs.disconnect();
          callback();
        }
      }
    }
  });
  obs.observe(parent, {
    childList: true,
  });
}

then with your example instead of

element.onRemove(() => releaseKraken(element));

you can do

onRemove(element, () => releaseKraken(element));

This approach should be plenty fast if all you are doing is watching a single element. While it may seem like a decent amount of looping, it is pretty rare for removedNodes to be more than one node, and unless something is removing tons of siblings all at once, mutations is going to be quite small too.

You could also consider doing

callback(el);

which would allow you to do

onRemove(element, releaseKraken);

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

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>

javascript detect when a certain element is removed

In most modern browsers you can use the MutationObserver to achieve this.

The way you would do it would be something like this:

var parent = document.getElementById('parent');var son = document.getElementById('son');
console.log(parent);var observer = new MutationObserver(function(mutations) {  mutations.forEach(function(mutation) {    console.log(mutation); // check if your son is the one removed  });});
// configuration of the observer:var config = {  childList: true};
observer.observe(parent, config);
son.remove();

function checkDOMChange()
{
    // check for any new element being inserted here,
    // or a particular node being modified

    // call the function again after 100 milliseconds
    setTimeout( checkDOMChange, 100 );
}