Detecting DOM item removed in javascript

Question

I am writing a plugin that is given a id. it adds some code to that id and starts some events. the problem I have found is if the container is later overwriten I can't find a way to shut down the events so they don't keep running. Below is a demo script to show what I have tried. I can't seem to find anyway to detect test2 doesn't 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>

are you allowed to recreate the element instead of replacing the contents of the element? — Technohacker, Oct 12 '16 at 03:18

Robert Brisita · Accepted Answer · 2016-10-12T04:01:17.997

The problem is that you are removing the parent of test2, so the target is never going to be what you are testing against. To solve this, in your conditional try:

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>

Dinh Tran · Answer 2 · 2016-10-12T05:08:32.707

I can't believe no one has told you this: You're using Mutation Events which is deprecated as described in here.

As recommended in that page, you should use Mutation Observer instead.

Below is the snippet I re-wrote your js code using 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>

You are not looking if `#test2` has been removed. Also, always remember to `disconnect()` your observer once you don't need it anymore. — Kaiido, Oct 12 '16 at 04:33
@Kaiido: Thanks for pointing out that I forgot to disconnect the observer. About the check for #test2, I just don't want to give him the completed code for copying/pasting. — Dinh Tran, Oct 12 '16 at 05:04
you are correct it is marked as depricated but your method does not work. https://jsfiddle.net/mctrivia/ecwvmcdb/ as you can see the div I am looking for is not in the array you mention. By the way nothing here can be cut and pasted into my code since this entire script is an example to demonstrate the problem I have found with a project to big and complicated to post here. — Matthew Cornelisse, Oct 12 '16 at 13:30
@MatthewCornelisse: Actually, the array contains div.test which is the parent of div#test2. When the parent node is removed, I believe that the child node can not stand alone. — Dinh Tran, Oct 13 '16 at 03:11

Detecting DOM item removed in javascript

2 Answers2