HTML DOM removeChild() 方法

什么是 removeChild() 方法

removeChild() 方法是 DOM 元素对象的一个方法，用于从当前节点中移除一个指定的子节点。它接受一个参数，即要被移除的子节点，如果成功移除，该方法将返回被移除的节点。否则返回 null。

如何使用 removeChild() 方法

要使用 removeChild() 方法，首先我们需要获取要删除的父节点，然后选择要删除的子节点。接着调用父节点的 removeChild() 方法，并将要删除的子节点作为参数传入即可。

下面是一个简单的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>removeChild() 方法示例</title>
</head>
<body>
    <div id="parent">
        <p id="child">这是一个子节点</p>
    </div>

    <button onclick="removeChildNode()">删除子节点</button>

    <script>
        function removeChildNode() {
            var parent = document.getElementById('parent');
            var child = document.getElementById('child');
            var removedNode = parent.removeChild(child);
            console.log('已删除节点：', removedNode);
        }
    </script>
</body>
</html>

在这个示例中，我们首先获取了 id 为 parent 的父节点和 id 为 child 的子节点。然后在点击按钮时，调用 removeChildNode() 函数，将子节点从父节点中移除，并将被移除的节点打印到控制台中。

注意事项

• 在使用 removeChild() 方法之前，务必确保要删除的子节点确实是父节点的子节点，否则会报错。
• 被移除的子节点并不会被销毁，它仍然存在于内存中，只是不再在 DOM 结构中显示而已。
• 在某些情况下，我们可能需要在移除节点之前做一些处理，比如保存节点的引用或者将节点移动到其他位置。

通过 removeChild() 方法，我们可以方便地删除 DOM 结构中的子节点，从而实现动态更新页面内容的效果。希望本文能够帮助你更好地理解和使用这个方法。