如何在 JavaScript 中移除所有子节点

摘要：在本教程中，您将学习如何使用 JavaScript DOM 方法移除节点的所有子节点。

要移除节点的所有子节点，您需要执行以下步骤

首先，选择第一个子节点（firstChild）并使用 removeChild() 方法将其移除。一旦第一个子节点被移除，下一个子节点将自动成为第一个子节点。
其次，重复第一步，直到没有剩余的子节点。

以下 removeAllChildNodes() 函数会移除节点的所有子节点

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}Code language: PHP (php)

假设您有以下 HTML 文档

<html lang="en">
<head>
  <title>Remove All Child Nodes</title>
</head>
<body>
  <div id="container">
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
  </div>
</body>
</html>Code language: HTML, XML (xml)

以下脚本将移除 id 为 container 的 <div> 的所有子节点

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}
const container = document.querySelector('#container');
removeAllChildNodes(container);Code language: PHP (php)

注意：innerHTML

以下代码也会移除节点的所有子节点

parent.innerHTML = '';Code language: PHP (php)

但是，不建议使用此方法，因为它不会移除子节点的事件处理程序，这可能会导致内存泄漏。

本教程是否有帮助？