JavaScript removeChild() 实用示例

摘要：在本教程中，您将学习如何使用 JavaScript removeChild() 方法从父节点中移除子节点。

JavaScript removeChild() 方法简介

要移除节点的子元素，请使用 removeChild() 方法

let childNode = parentNode.removeChild(childNode);Code language: JavaScript (javascript)

childNode 是您想要移除的 parentNode 的子节点。如果 childNode 不是 parentNode 的子节点，该方法将抛出异常。

removeChild() 从 DOM 树中返回已移除的子节点，但将其保留在内存中，以便稍后使用。

如果您不想将移除的子节点保留在内存中，请使用以下语法

parentNode.removeChild(childNode);Code language: JavaScript (javascript)

子节点将保留在内存中，直到 JavaScript 垃圾回收器销毁它。

JavaScript removeChild() 方法示例

假设您有以下项目列表

<ul id="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About Us</li>
</ul>Code language: HTML, XML (xml)

以下示例使用 removeChild() 移除最后一个列表项

let menu = document.getElementById('menu');
menu.removeChild(menu.lastElementChild);Code language: JavaScript (javascript)

工作原理

首先，使用 getElementById() 方法获取 id 为 menu 的 ul 元素。
然后，使用 removeChild() 方法移除 ul 元素的最后一个元素。menu.lastElementChild 属性返回 menu 的最后一个子元素。

将所有内容放在一起。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript removeChild()</title>
</head>
<body>
    <ul id="menu">
        <li>Home</li>
        <li>Products</li>
        <li>About Us</li>
    </ul>
    <script>
        let menu = document.getElementById('menu');
        menu.removeChild(menu.lastElementChild);
    </script>
</body>
</html>Code language: HTML, XML (xml)

移除元素的所有子节点

要移除元素的所有子节点，请执行以下步骤

使用 firstChild 属性获取元素的第一个节点。
重复移除子节点，直到没有子节点剩余。

以下代码展示了如何从 menu 元素中移除所有列表项

let menu = document.getElementById('menu');
while (menu.firstChild) {
    menu.removeChild(menu.firstChild);}Code language: JavaScript (javascript)

您可以通过将父节点的 innerHTML 属性设置为空白来移除元素的所有子节点

let menu = document.getElementById('menu');
menu.innerHTML = '';Code language: JavaScript (javascript)

摘要

使用 parentNode.removeChild() 从父节点中移除子节点。
如果无法在父节点中找到子节点，则 parentNode.removeChild() 将抛出异常。

测验

本教程是否有帮助？