Geek Answers Handbook

Detecting a DOM element being removed in javascript

I am writing a plugin that is given an id. it adds code to this id and fires some events. The problem I discovered is if the container is overwritten later, I cannot find a way to close the events so that they do not continue to work. Below is a demo of the script to show what I tried. It seems that I can not find in any way, to detect test2 does not exist and clear the interval.

 $(function() { /* ********************************* * Simple example of something that could be done * being told to work on id test2 ********************************* */ var a=0; $("#test2").append('<br>I Ran'); var id=setInterval(function() { console.log("running"); //ctrl+shift+j will see message every second },1000); //try to remove id test2 is removed $(document).on("DOMNodeRemoved", function (e) { console.log(e.target.id,e.target); if (e.target.id=="test2") { //is never true since test2 was added by jquery clearInterval(id); //stops message from being writen } }) /* ********************************* * Some other part of app that wipes away the above script is playing with ********************************* */ $(document).on('click','#del',function(){ $("#test").html('wipe out'); //replaces content of div test with test2.html }); }); 
 <!DOCTYPE html> <html lang="en"> <header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </header> <body> <div id="test"> <div id="2" class="test"> <div id="test2">help</div> </div> </div> <div id="del">Press here to remove</div> </body> </html>
+6
source share
2 answers

The problem is that you remove the test2 parent, so the goal will never be what you are testing against. To solve this problem, in your conditional attempt:

 if ($(e.target).find("#test2").length) { clearInterval(id); } 

 $(function() { /* ********************************* * Simple example of something that could be done * being told to work on id test2 ********************************* */ var a=0; $("#test2").append('<br>I Ran'); var id=setInterval(function() { console.log("running"); //ctrl+shift+j will see message every second },1000); //try to remove id test2 is removed $(document).on("DOMNodeRemoved", function (e) { console.log(e.target.id,e.target); if ($(e.target).find("#test2").length) { clearInterval(id); } }) /* ********************************* * Some other part of app that wipes away the above script is playing with ********************************* */ $(document).on('click','#del',function(){ $("#test").html('wipe out'); //replaces content of div test with test2.html }); }); 
 <!DOCTYPE html> <html lang="en"> <header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </header> <body> <div id="test"> <div id="2" class="test"> <div id="test2">help</div> </div> </div> <div id="del">Press here to remove</div> </body> </html>
+1
source

I can’t believe that no one has told you about this: you are using Mutation Events, which is deprecated as described in here .

As recommended on this page, you should use the Mutation Observer .

Below is a snippet that I rewrote js code using a Mutation Observer based on the original example

 $(function () { var a = 0; $("#test2").append('<br>I Ran'); var id = setInterval(function () { console.log("running"); }, 1000); // select the target node var target = document.getElementById("test"); // create an observer instance var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.removedNodes.length > 0) { // You need to check if the mutation.removedNodes array contains div#test2 here. I'm just too lazy. clearInterval(id); //stops message from being writen console.log("stopped!"); console.log("You can set debugger here to play with mutation.removedNodes array!"); observer.disconnect(); // stop observing } }); }); // configuration of the observer: var config = { childList: true }; observer.observe(target, config); // start observe $(document).on('click', '#del', function () { $("#test").html('wipe out'); //replaces content of div test with test2.html }); }); 
 <!DOCTYPE html> <html lang="en"> <header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="site.js"></script> </header> <body> <div id="test"> <div id="2" class="test"> <div id="test2">help</div> </div> </div> <div id="del">Press here to remove</div> </body> </html>
0
source

More articles:


All Articles