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元素，并且该元素没有任何子节点。

总结

removeChild()函数是一种用于JavaScript DOM中的方法，可用于删除HTML文档中的DOM元素节点。可以通过获取父节点的引用以及需要删除的节点的引用来运用此函数。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：DOM节点删除函数removeChild()用法实例 - Python技术站