如何删除元素的所有子节点[重复]答案

【问题标题】：How to remove all the child nodes of an element [duplicate]如何删除元素的所有子节点[重复]
【发布时间】：2021-12-04 08:00:24
【问题描述】：

我刚刚开始使用 javascript，我正在尝试构建一个待办事项应用程序。我的问题是我有一个清除所有按钮，单击该按钮会从列表中删除所有任务。为了让它工作，我写了这个函数（见下文）。

function clearAll(e){
e.preventDefault()

let allItems = todoList.childNodes
allItems.forEach(function(item){
   todoList.removeChild(item)
})
      
  }

这里

待办事项列表

是一个 ul 元素，div（任务）动态附加到该元素。结果是，当我单击按钮时，我会删除备用项目。我该如何解决这个问题？

【问题讨论】：

标签： javascript html

【解决方案1】：

下面的removeAllChildNodes()函数删除一个节点的所有子节点：

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}
const container = document.querySelector('#container');
removeAllChildNodes(container)

【讨论】：

【解决方案2】：

只要删除innerHTML，就不需要所有这些复杂的东西了！

todoList.innerHTML = ""

【讨论】：

将removeChild 与innerHTML 进行比较的有趣性能分析：rusingh.com/javascript-benchmark-removechild-vs-innerhtml 我惊讶地发现innerHTML 明显变慢（在此测试中慢了65%）