我不能删除通过JavaScript页面的所有段落(I can't remove all th

2019-10-17 02:24发布

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<p>1
<p>2
<p>3
<p>4
<p>5
<p>6
<p>7
<p>8
<p>9
<p>10
<p>11
<p>12
<script>
    // When the document is clicked, codes below should remove all the paragraphs in the page.
    // There are 12 paragraphs in the page, but codes below can just remove 6 of them.
    document.addEventListener('click', function () {
        var i, allParagraphElements = document.getElementsByTagName('p');
        console.log('allParagraphElements.length: ' + allParagraphElements.length);
        for (i = 0; i < allParagraphElements.length; i += 1) {
            console.log('i: ' + i);
            allParagraphElements[i].parentNode.removeChild(allParagraphElements[i]);
        }
    }, false);
</script>

查看的jsfiddle代码: http://jsfiddle.net/7NmRh

我怎样才能解决这个问题呢? 谢谢。

Answer 1:

你迭代从上到下:

迭代之一:12的段落中,索引= 0

段索引0处被删除,第1段现在是在索引0处

第二次迭代:11段,指数= 1

段索引1处被删除,第2段现在处于指数1


你看什么错? 只删除半段

迭代周围的其他方式,所有的段落被删除

的jsfiddle



Answer 2:

.getElementsByTagName返回现场节点列表,你自己修改表示底层子树会自动更新。 基本上,当你删除元素.length被改变以及循环将结束“过早”。

你可以使用.querySelectorAll得到一个静态节点列表来代替。

http://jsfiddle.net/7NmRh/1/

allParagraphElements = document.querySelectorAll('p');


您也可以在节点列表转换为数组,这就像一个静态节点列表,以及:

allParagraphElements = [].slice.call( document.getElementsByTagName('p') );

http://jsfiddle.net/7NmRh/4/



文章来源: I can't remove all the paragraphs in the page via JavaScript