Soy completamente nuevo con MutationObserver . Necesito detectar si un elemento existe o se elimina de forma permanente . Encontré ese ejemplo que realmente impresionante. ¡pero funciona solo para la existencia del elemento y solo una vez por primera vez! no siente la eliminación del elemento y nunca siente la existencia del elemento después de la primera vez.
HTML
<button onclick="appendS()">add message</button> <button onclick="remove()">remove message</button> <div id='imobserved'></div>CSS
button{padding:30px; margin: 10px;} #imobserved{border: 1px solid black; padding: 10px;}JS
function appendS(){ let s = document.createElement('span'); s.id = "message"; s.innerText = "some message !" document.querySelector('#imobserved').appendChild(s); } function remove(){ document.querySelector('#imobserved').innerHTML = ""; } function waitForAddedNode(params) { new MutationObserver(function(mutations) { var el = document.getElementById(params.id); if (el) { this.disconnect(); params.done(el); } }).observe(params.parent || document, { subtree: !!params.recursive || !params.parent, childList: true, }); } // Usage: waitForAddedNode({ id: 'message', parent: document.querySelector('#imobserved'), recursive: false, done: function(el) { alert('i see you') } });Así es como puedes lograrlo. He cambiado un poco tu código.
En primer lugar, nunca cree varios elementos DOM con el mismo ID, esta es una mala idea. En la devolución de llamada de MutationObserver , tiene mucha información, incluso sobre qué nodos se han agregado y cuáles se han eliminado.
Siéntase libre de ejecutar el fragmento a continuación y ver cómo se comporta.
function appendS() { let s = document.createElement("span"); s.innerText = "some message !"; document.querySelector("#imobserved").appendChild(s); } function remove() { document.querySelector("#imobserved").innerHTML = ""; } function waitForAddedNode(params) { new MutationObserver(function (mutationsList) { for (const mutation of mutationsList) { if (mutation.addedNodes.length) { params.onAdd(mutation.addedNodes); } if (mutation.removedNodes.length) { params.onDelete(mutation.removedNodes); } } }).observe(params.parent, { childList: true, subtree: true }); } waitForAddedNode({ parent: document.querySelector("#imobserved"), recursive: false, onAdd: function (elements) { alert("i see you added new element"); console.log(elements); }, onDelete: function (elements) { alert("i see you removed " + elements.length + " elements"); console.log(elements); } }); const addBtn = document.querySelector("#add"); const removeBtmn = document.querySelector("#remove"); addBtn.addEventListener("click", appendS); removeBtmn.addEventListener("click", remove); button { padding: 30px; margin: 10px; } #imobserved { border: 1px solid black; padding: 10px; } <body> <button id="add">add message</button> <button id="remove">remove message</button> <div id="imobserved"></div> </body> const observedEl = document.querySelector('#imobserved') function append() { const s = document.createElement('span'); s.id = "message"; s.innerText = "some message!"; observedEl.appendChild(s); } function remove() { if (observedEl.lastChild) { observedEl.lastChild.remove(); } } const observer = new MutationObserver(function(e) { const addition = e[0].addedNodes.length; const message = addition ? 'Element added' : 'Element deleted' alert(message); }); observer.observe(observedEl, { subtree: true, childList: true }); button { padding: 30px; margin: 10px; } #imobserved { border: 1px solid black; padding: 10px; } <button onclick="append()">add message</button> <button onclick="remove()">remove message</button> <div id='imobserved'></div>