javascript - 删除所有类元素

Question

我用类 div 创建了 8 个 div。

<div class="div"></div>

然后我创建了一个函数 removeDivs() 来删除每个 div。

function removeDivs() {
    divs = document.getElementsByClassName('div')
    for (i = 0; i <= 8; i++) {
        divs.removeChild(divs.childNodes[i])
    }
}

为什么这行不通？

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

Answer 1

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

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

换句话说，更改以下内容:

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

到:

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

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

工作片段:

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>