DOMNodeInserted и DOMNodeRemoved события

Question

Код ниже работает отлично, кроме счетчика. Когда я добавляю элемент в список, счетчик является точным, хотя, когда я удаляю элемент из списка, он не вычитает один из счетчика. Есть идеи?

HTML

<nav> 
    <div id ="counter">1</div> 
     <ul id="list"> 
      <li class="test" id="liOne"><a href="#">test</a></li> 
     </ul> 
     <p id="contOne"></p> 

     <a id="button" class="button btn" href="#">Add</a><br> 
     <a id="button" class="button removeBtn" href="#">Remove</a> 
</nav> 

JavaScript

var elList, addLink, newEl, netText, counter, listItems, removeLink, removeEl; 

elList = document.getElementById('list'); 
addLink = document.querySelector('.btn'); 
counter = document.getElementById('counter'); 
removeLink = document.querySelector('.removeBtn'); 

function addItem(e) { 

if(e.preventDefault) { 
    e.preventDefault(); 
} else { 
    e.returnValue = false; //IE fallback code 
} 

newEl = document.createElement('li'); 
newText = document.createTextNode('New List Item'); 
newAnchor = document.createElement('a'); 
newAnchor.setAttribute('href', '#'); 
newAnchor.appendChild(newText); 
newEl.appendChild(newAnchor); 
elList.appendChild(newEl); 

} 

function removeItem(e) { 

if(e.preventDefault) { 
    e.preventDefault(); 
} else { 
    e.returnValue = false; //IE fallback code 
} 

var removeEl = document.querySelector('li'); 
var containEl = removeEl.parentNode; 

containEl.removeChild(removeEl); 

} 

function updateCount() {         // Declare function 
listItems = elList.getElementsByTagName('li').length; // Get total of <li>s 
counter.innerHTML = listItems;       // Update counter 
} 

removeLink.addEventListener('click', removeItem, false); 
addLink.addEventListener('click', addItem, false); 
elList.addEventListener('DOMNodeInserted', updateCount, false); // DOM     updated. fires when a node is inserted into dom tree 
elList.addEventListener('DOMNodeRemoved', updateCount, false); 

Answer 1

Проблема заключается в том, что функция updateCount() работает быстрее, чем функция removeItem() (до элемент удаляется). Я хотел бы предложить:

Извлеките следующие строки:

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

и звоните updateCount() конец ваших addItem и removeItem методов следующим образом:

function removeItem(e) { 

    /* Your code here*/ 

    updateCount(); 
} 

EDIT: Посмотреть рабочий JSFiddle пример

Answer 2

События мутации have been deprecated (более подробная информация из W3C приведена here). Вместо этого используйте mutation observers.

Обработчики событий DOM:

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

изменить бы к следующему. Обратите внимание, что это вызовет updateCount для всех событий DOM для элемента, но наблюдатель может быть настроен для обработки определенных событий.

var listObserver = new MutationObserver(updateCount); 
listObserver.observe(elList, { attributes: true, childList: true, characterData: true }); 

Полный рабочий пример приведен ниже.

var elList, addLink, newEl, netText, counter, listItems, removeLink, removeEl; 
 

 
elList = document.getElementById('list'); 
 
addLink = document.querySelector('.btn'); 
 
counter = document.getElementById('counter'); 
 
removeLink = document.querySelector('.removeBtn'); 
 

 
function addItem(e) { 
 

 
    if (e.preventDefault) { 
 
    e.preventDefault(); 
 
    } else { 
 
    e.returnValue = false; //IE fallback code 
 
    } 
 

 
    newEl = document.createElement('li'); 
 
    newText = document.createTextNode('New List Item'); 
 
    newAnchor = document.createElement('a'); 
 
    newAnchor.setAttribute('href', '#'); 
 
    newAnchor.appendChild(newText); 
 
    newEl.appendChild(newAnchor); 
 
    elList.appendChild(newEl); 
 

 
} 
 

 
function removeItem(e) { 
 

 
    if (e.preventDefault) { 
 
    e.preventDefault(); 
 
    } else { 
 
    e.returnValue = false; //IE fallback code 
 
    } 
 

 
    var removeEl = document.querySelector('li'); 
 
    var containEl = removeEl.parentNode; 
 

 
    containEl.removeChild(removeEl); 
 

 
} 
 

 
function updateCount() { // Declare function 
 
    listItems = elList.getElementsByTagName('li').length; // Get total of <li>s 
 
    counter.innerHTML = listItems; // Update counter 
 
} 
 

 

 
removeLink.addEventListener('click', removeItem, false); 
 
addLink.addEventListener('click', addItem, false); 
 

 
var listObserver = new MutationObserver(updateCount); 
 
listObserver.observe(elList, { attributes: true, childList: true, characterData: true });

<nav> 
 
    <div id="counter">1</div> 
 
    <ul id="list"> 
 
    <li class="test" id="liOne"><a href="#">test</a> 
 
    </li> 
 
    </ul> 
 
    <p id="contOne"></p> 
 

 

 
    <a id="button" class="button btn" href="#">Add</a> 
 
    <br> 
 
    <a id="button" class="button removeBtn" href="#">Remove</a> 
 
</nav>