DOM节点删除函数removeChild()用法实例

2023年6月10日下午12:41 • JavaScript

当你需要从HTML中删除一个或多个节点时，可以使用JavaScript中的removeChild()函数。下面是使用removeChild()函数的详细攻略。

什么是removeChild()函数？

removeChild()函数是访问HTML DOM节点的JavaScript方法之一。它可用于删除HTML节点和其子节点，从而实现从HTML文档中删除DOM元素节点的目的。

removeChild()函数的语法

removeChild()的语法如下：

parent_node.removeChild(child_node)

其中，parent_node是父节点，child_node是要删除的子节点。

removeChild()函数怎样使用？

要使用removeChild()函数从HTML文档中移除元素，需要遵循以下步骤：

第一步，获取对需要移除的元素的父节点的引用（使用JavaScript DOM）。
第二步，获取对需要删除的节点的引用。
第三步，将引用插入到parent_node的removeChild()函数中。
执行该函数，删除HTML文档中的该节点以及其所有子节点。

removeChild()函数示例1

以下是使用removeChild()函数删除HTML文档中一个带有子节点的元素的样例代码和结果：

<!DOCTYPE html>
<html>
<head>
    <title>removeChild示例1</title>
</head>
<body>

    <h3>DOM删除节点函数removeChild用法示例1</h3>

    <ul id="myList">
        <li>苹果</li>
        <li>香蕉</li>
        <li>草莓</li>
    </ul>

    <p>请点击下面的按钮，删除“草莓”项目。</p>
    <button onclick="removeNode()">删除</button>

    <script type="text/javascript">
        function removeNode() {
            var parent_node = document.getElementById("myList");
            var child_node = parent_node.childNodes[5];
            parent_node.removeChild(child_node);
        }
    </script>

</body>
</html>

在上面的示例中，我们使用removeChild()函数删除了HTML文档中的草莓项目。

removeChild()函数示例2

以下是使用removeChild()函数删除HTML文档中一个没有子节点的元素的样例代码和结果：

<!DOCTYPE html>
<html>
<head>
    <title>removeChild示例2</title>
</head>
<body>

    <h3>DOM删除节点函数removeChild用法示例2</h3>

    <div id="myDiv">这是要被删除的这段文本。</div>

    <p>请点击下面的按钮，删除这段文本。</p>
    <button onclick="removeNode()">删除</button>

    <script type="text/javascript">
        function removeNode() {
            var parent_node = document.getElementById("myDiv").parentNode;
            var child_node = document.getElementById("myDiv");
            parent_node.removeChild(child_node);
        }
    </script>

</body>
</html>

在上面的示例中，我们使用removeChild()函数删除了HTML文档中的MyDiv元素，并且该元素没有任何子节点。