回到课程

清除元素

重要程度: 5

创建一个函数 clear(elem) 用来移除元素里的内容。

<ol id="elem">
  <li>Hello</li>
  <li>World</li>
</ol>

<script>
  function clear(elem) { /* 你的代码 */ }

  clear(elem); // 清除列表
</script>

首先我们看看错误的做法:

function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
      elem.childNodes[i].remove();
  }
}

这是无效的,因为调用 remove() 从前面开始移除 elem.childNodes 集合里元素,元素的起始下标一直都是 0,但是 i 却一直在增长,有的元素会直接被忽略了。

for..of 循环的结果也跟上面一样。

正确的做法是:

function clear(elem) {
  while (elem.firstChild) {
    elem.firstChild.remove();
  }
}

这里还有一种更简便的方法,也能达到我们需要的效果:

function clear(elem) {
  elem.innerHTML = '';
}