Question

我已经使用班级for (var i in data) { for (var j in data[i]) { switch (data[i][j]) { // ... drawing pixels } } }创建了8个div。

div

然后我创建了一个函数<div class="div"></div>来删除每个div。

removeDivs()

为什么这不起作用？

JSFIDDLE：https://jsfiddle.net/nu8jt766/

Answer 1

它不起作用，因为.removeChild()方法仅根据方法操作的父元素删除子节点。在您的示例中，divs是一个类似于数组的元素对象（不是您正在迭代的当前元素的父元素），这意味着什么都没有被删除。

您需要选择要迭代的当前.div元素的父元素，然后删除相应的子元素。

换句话说，请更改以下内容：

divs.removeChild(divs.childNodes[i]);

为：

divs[i].parentNode.removeChild(divs[i]);

作为旁注，您会注意到for循环也已更新为递减（而非递增），因为.getElementsByClassName() returns a live HTML collection在每个元素被删除时更新（这意味着您将如果你增加，跳过一半以上的元素。

工作片段：

function removeDivs() {
    divs = document.getElementsByClassName('div');
    for (var i = divs.length - 1; i > -1; i--) {
        divs[i].parentNode.removeChild(divs[i]);
    }
}

removeDivs();

.div { height: 100px; width: 100px; border: 2px solid #000; display: inline-block; }

<p>Nothing should be displayed</p>
<div class="div"></div><div class="div"></div><div class="div"></div><div class="div"></div><div class="div"></div><div class="div"></div><div class="div"></div><div class="div"></div>

删除所有类元素

1 个答案: