删除所有类元素

Question

我已经在课堂上创建了8个div 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]);

作为旁注,您会注意到for循环也已更新为递减(而不是递增),因为.getElementsByClassName()返回一个实时HTML集合,该集合在每个元素被删除时更新(这意味着如果您将跳过一半以上的元素)增量).

工作片段:

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>