removeChild（）;不从列表中删除所有项目

-1

当我运行下面的代码时，一半的项目被从列表中删除..我试图从列表中删除所有项目。removeChild（）;不从列表中删除所有项目

//Sets an event listener to the reset button. 
    resetButton.addEventListener('click', (e) => { 
     const ul = document.getElementById("myUL"); 
     console.log(ul.children.length); 

     //Moves through the unordered list and removes each list item. 
     for(let i = 0; i < ul.children.length; i++) { 
     ul.removeChild(ul.children[i]); 
     } 
    });

来源

2017-06-03 Collin DeSoto

的[使用Javascript不消除所有可能的复制在一个div中的元素]（https://stackoverflow.com/questions/18410450/javascript-not-removing-all-elements-within-a-div） – Xufox

你正在修改你正在迭代的列表 - 这导致了观察到问题。有关解决方案，请参阅https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript。 –

你试过了吗（让我= ul.children.length; i> = 0; i ++）'？ – Vivick

你的代码看起来似乎是随机的原因的HTML内容是由于：

for(let i = 0; i < ul.children.length; i++) { 
    ul.removeChild(ul.children[i]); 
}

正如你将要从UL元素，它的孩子的长度越来越小，因此ul.children.length正在从n减少到n-1，到n-2等。但是，您的i正在增加。最终，i将会大于ul.children.length甚至认为有孩子遗留下来。随着i的增加，你在UL的孩子越来越小，但是你先从0中删除。所以这意味着你最终还会试图移除不存在的元素，就像现在在[0]中一样。

我修改你的代码到下方：

document.getElementById('reset').addEventListener('click', (e) => { 
    const ul = document.getElementById("myUL"); 

    while (ul.children[0]) { 
    ul.removeChild(ul.children[0]) 
    } 
});

来源

2017-06-03 22:54:21 user2340824

谢谢，所以使用ul.removeChild（ul.firstChild）;应该工作，对吗？ –

是的，这也会起作用 – user2340824

你可以这样做，代码将更加紧凑

jQuery的解决方案

//Sets an event listener to the reset button. 
    resetButton.addEventListener('click', (e) => { 
     const ul = document.getElementById("myUL"); 

     $(ul).empty(); 

    });

此功能可除去父对象的所有孩子

.empty();

HTML标准解决方案

//Sets an event listener to the reset button. 
    resetButton.addEventListener('click', (e) => { 
     const ul = document.getElementById("myUL"); 

     ul.innerHTML =""; 

    });

这个变量代表了父对象

.innerHTML =""

来源

2017-06-03 22:51:22

你迭代一个列表，里面的迭代你操纵的列表中删除元素。这是造成这个问题的原因。

为了消除您的节点内的所有元素，你可以简单地做：

document.getElementById("myUL").innerHTML = '';

否则，如果你喜欢某种原因循环，这样做：

var el = document.getElementById("myUL"); 
while (el.firstChild) { 
    el.removeChild(el.firstChild); 
}

来源

2017-06-03 23:07:39 quirimmo

removeChild（）;不从列表中删除所有项目

回答

相关问题