控制台中的循环出错了

Question

我创建了一个简单的代码，其中父元素<ul>在每次单击时都会删除单个子元素<li>。执行成功，但每次单击父元素时，控制台中都会显示一条消息，指出我的代码有问题。复制并粘贴此代码时，您将看到它：

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>

JavaScript的

query('ul').onclick = function() {
    var childItems = Array.prototype.slice.call(this.children);
    for(var c=0; c<childItems.length; ++c) {
        while(childItems.length != 0) {
            this.removeChild(childItems[c]);
        }
    }
}

有人可以告诉我我的代码有什么问题以及如何修复它？

Answer 1

使用slice方法时，它返回一个新数组。然后当你使用removeChild时，你正在使用这个新数组而不是节点列表。你得到的错误与数组有关，不属于ul节点。

你可以修复，

query('ul').onclick = function(e) {
    this.removeChild(this.children[0]);
}

https://jsfiddle.net/5g6767h1/

Answer 2

我不会在不必要的while循环中嵌套for循环，我也不会使用Array.prototype.slice.call()。无论哪种情况，您使用for和while循环实现的代码都会在第一次点击时删除所有元素，而不是逐个删除它们。建议的方法（例如）是使用ul的childNodes成员。例如：

yourUL.onclick = function() {
    this.removeChild(this.childNodes[0]);
};

让我把它扔进一个小提琴：here

Answer 3

<ul id="TestUL">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>

var ul = document.getElementById('test');
ul.onclick = function() {
    var childItems = Array.prototype.slice.call(this.children);
    for(var c=0; c<childItems.length; ++c) {
        while(childItems.length != 0) {
            this.removeChild(childItems[c]);
        }
    }
}