Question

var parent = document.getElementById("about");
child = parent.lastElementChild;

for (var i = 0; i < 18; i++) {
  parent.removeChild(child);
  child = child.previousElementSibling;

}

它甚至在一个onclick调用的js函数中，但它仅在每次单击按钮时才删除一个元素，而不是一次删除所有18个元素。

Answer 1

在获得同级兄弟之前，先将其从父级中删除。删除后，它不再具有同级兄弟。

尝试一下：

var parent = document.getElementById("about");
child = parent.lastElementChild;

for (var i = 0; i < 18; i++) {
  var next = child.previousElementSibling; // Note: using var inside a for loop will still hoist the declaration to the parent scope, if you use ES6 you should use `let` instead
  parent.removeChild(child);
  child = next;
}

小注释： 通常，使用18之类的魔术数字被认为是不好的做法，您很可能会根据某些逻辑来计算18（例如：删除左侧的所有元素，或计算具有特定类别的所有元素）。魔术数字不好，因为当您更改数据或代码时，您很容易忘记更新这些数字（例如，您添加了一个元素，但是却忘记了更改数字到19）。

修改当您开始计算循环的上界时，请确保只计算一次，而不是每次迭代都计算一次。

for (var i = 0, j = magicNumberCalculation; i < j; i++) {

Answer 2

由于您尝试从头开始，并一直尝试到子元素的开头。你可以做这样的事情。

获取所有子元素，使用spread syntax将它们放在数组中。然后Array#reverse个并使用Array#every。

一旦索引到达您的magic number -1，则返回false以停止循环。

const about = document.getElementById("about");
const children = about.children;
const magicNumber = 3;

[...children]
.reverse()
.every((ele, index)=>{
   about.removeChild(ele);
   return (index !== magicNumber-1);
});

<ul id="about">
  <li>Some child 1</li>
  <li>Some child 2</li>
  <li>Some child 3</li>
  <li>Some child 4</li>
</ul>

为什么我的for循环无法正常运行？

2 个答案: