Javascript如何更新计数？

Question

我现在只学习了大约两周的 JavaScript，我在我的书中做了一个例子，但我想整合我到目前为止所学到的东西。不幸的是，我没有取得任何成功。我已经放弃自己尝试了，所以我就在这里。我需要帮助。

我想显示 id="counter"上的计数，包括添加的项目和删除的项目。当我删除项目时，我很难更新计数。

HTML:

 <div id="page1">
    <h1>Listking logo</h1>
    <h2>buy groceries<span id="counter"></span></h2>
    <ul id="list">
        <li>Fresh figs</li>
    </ul>
    <div id="button">
        <a href="/additem" id="add">add list item</a>
    </div>
    <div id="button">
        <a href="/deleteItem" id="remove">remove list item</a>
    </div>
</div>

Javascript:

    var elList, addLink, removeLink, newEl, newText, counter, listItems;
elList = document.getElementById('list');
addLink = document.getElementById('add');
counter = document.getElementById('counter');
removeLink = document.getElementById('remove');

//creates list Item when the link:add list item is clicked.
function addItem(e){
    e.preventDefault();
    newEl = document.createElement('li');
    newText = document.createTextNode('New list item');
    newEl.appendChild(newText);
    elList.appendChild(newEl);
}
//deletes items from the list
function deleteItem(e){
    e.preventDefault();
    item = document.getElementsByTagName('li')[0];
    elList.removeChild(item);


}
//updates the count on id="counter"
function updateCount(){
    listItems = elList.getElementsByTagName('li');
    counter.innerHTML = listItems.length;

}

removeLink.addEventListener('click', deleteItem, false);
addLink.addEventListener('click', addItem, false);
elList.addEventListener('DOMNodeInserted', updateCount, false);
elList.addEventListener('DOMNodeRemoved', updateCount, false);

Answer 1

尝试下面的代码。该代码将延迟执行'节点删除'，以便在进行计数之前完成:

function updateCount(){
    setTimeout(function(){
        listItems = elList.getElementsByTagName('li');
        counter.innerHTML = listItems.length;
    }, 100);
}

您可以将延迟设置为 1 而不是 100，这样它就会起作用。

另一种选择是不注册 DOMNodeInserted 和 DOMNodeRemoved 监听器，而是在 末尾添加 updateCount() 调用addItem() 和 deleteItem() 函数

编辑:

以下是这两种解决方案的有效 JSfiddle 示例:

• Adding delay with setTimeout
• Removing listeners