¿Hay alguna forma de recibir una notificación cuando se elimina un elemento del DOM, ya sea directamente o como parte de un subárbol ? Parece que los únicos métodos disponibles son solo para nodos eliminados directamente, pero me gustaría recibir una notificación cuando se elimine un subárbol completo que contiene mi nodo.

EDITAR

Parece que el problema no estaba del todo claro, por lo que hice un desafío: https://jsbin.com/winukaf

La DOM se ve así:

<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>

Y el desafío es notificar cuándo se elimina alguno de los elementos aquí, ya que eso eliminará el nodo hoja del árbol DOM.

6
Marius 16 oct. 2018 a las 14:46

2 respuestas

La mejor respuesta

Hay una API HTML5 llamada MutationObserver y tiene bastante buena < a href = "https://caniuse.com/#feat=mutationobserver" rel = "nofollow noreferrer"> soporte

Este es un ejemplo:

// 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});
5
Marius 17 oct. 2018 a las 07:41

Debe utilizar la API de MutationObserver para lograr esto. Aquí está el ejemplo de MDN adaptado a un escenario simple:

// 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>
0
Angelos Chalaris 16 oct. 2018 a las 12:45