当 DOMNodeInserted 事件触发时， upateCount function 会按预期工作，但当 DOMNodeRemoved 触发时不会再次针对相同的 function？

Question

HTML

here is the left and right button in HTML to remove list items and add list items respectively.

<div id="groceries">
           <h1>Buy Groceries<span id="counter">0</span></h1>
           <ul id="list"></ul>

           <div class="left button"><a  id ="lLink" href="">REMOVELISTITEM</a></div>     
           <div class="right button"><a  id ="rLink" href="">ADDLISTITEM</a></div>
         
           <div class="clear"></div>
      </div>

java script

as click event fire on thise <div class="button left"><a id ="lLink" href="">REMOVELISTITEM</a></div> and thise <div class="button right"><a id ="rLink" href="">ADDLISTITEM</a></div> buttons list item removed or add into the list because of which Mutation events fire

Elist.addEventListener('DOMNodeInserted',updateCount,false);
Elist.addEventListener('DOMNodeRemoved',updateCount,false);

which targets the same "updateCount" function but when the "DOMNodeInserted" event fire it calculate the right number of list items but not when "DOMNoderemoved" event fire why?

  function addListItem(e){
  e.preventDefault();
  newListnode = document.createElement('li');
  textNode = document.createTextNode("new list item");
  newListnode.appendChild(textNode);
  Elist.appendChild(newListnode);
}

function removeListItem(e){
    e.preventDefault();
    Elist.removeChild(Elist.lastElementChild);
}

function updateCount(e){
  
    var numOfItems = Elist.getElementsByTagName('li').length;
    Ecounter.innerHTML = numOfItems;
}

ElLink.addEventListener('click',removeListItem,false);
ErLink.addEventListener('click',addListItem,false);

Elist.addEventListener('DOMNodeInserted',updateCount,false);
Elist.addEventListener('DOMNodeRemoved',updateCount,false);

Answer 1

Adding or Removing Items to/from DOM can take a little bit of time and therefore you do not have the results immediately. With this in mind, you should wait for the DOM to update, then do your job. putting a simple setTimeout() would put your code in a lower order in eventCycle and can solve your issue.

By the way, this is not the best approach tho, you can get the idea of what's happening and use a more advanced or optimized way to solve it

 var Elist = document.getElementById('list'); var ElLink = document.getElementById('lLink'); var ErLink = document.getElementById('rLink'); var Ecounter = document.getElementById('counter'); function addListItem(e) { e.preventDefault(); newListnode = document.createElement('li'); textNode = document.createTextNode("new list item"); newListnode.appendChild(textNode); Elist.appendChild(newListnode); } function removeListItem(e) { e.preventDefault(); Elist.removeChild(Elist.lastElementChild); } function updateCount(e) { setTimeout(function() { var numOfItems = Elist.getElementsByTagName('li').length; Ecounter.innerHTML = numOfItems; }, 0); } ElLink.addEventListener('click', removeListItem, false); ErLink.addEventListener('click', addListItem, false); Elist.addEventListener('DOMNodeInserted', updateCount, false); Elist.addEventListener('DOMNodeRemoved', updateCount, true);

 <div id="groceries"> <h1>Buy Groceries<span id="counter">0</span></h1> <ul id="list"></ul> <div class="left button"><a id="lLink" href="">REMOVELISTITEM</a></div> <div class="right button"><a id="rLink" href="">ADDLISTITEM</a></div> <div class="clear"></div> </div>