JS 删除 DOM 元素|极客笔记

JS 删除 DOM 元素

在网页开发中，经常会遇到需要操作 DOM 元素的情况，其中之一就是删除一个已经存在的 DOM 元素。本文将介绍如何使用 JavaScript 来删除 DOM 元素，并提供一些常见的示例和技巧。

使用 `remove()` 方法

在 JavaScript 中，通过调用 DOM 元素的 remove() 方法可以删除元素。该方法会从它的父节点中移除元素，并使其在文档中不存在。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>删除 DOM 元素示例</title>
</head>
<body>
    <div id="myDiv">要删除的元素</div>

    <button onclick="removeElement()">删除元素</button>

    <script>
        function removeElement() {
            var element = document.getElementById("myDiv");
            element.remove();
        }
    </script>
</body>
</html>

在这个示例中，当点击按钮时，会调用 removeElement 函数来删除 myDiv 元素。运行代码后，点击按钮即可看到 myDiv 元素被成功删除。

使用 `parentNode.removeChild()` 方法

除了使用 remove() 方法之外，还可以通过 parentNode.removeChild() 方法来删除 DOM 元素。该方法需要操作要删除元素的父节点。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>删除 DOM 元素示例</title>
</head>
<body>
    <div id="parent">
        <div id="myDiv">要删除的元素</div>
    </div>

    <button onclick="removeElement()">删除元素</button>

    <script>
        function removeElement() {
            var element = document.getElementById("myDiv");
            element.parentNode.removeChild(element);
        }
    </script>
</body>
</html>

在这个示例中，通过 parentNode.removeChild(element) 的方式来删除 myDiv 元素。同样地，点击按钮即可看到 myDiv 元素被成功删除。

删除多个元素

如果需要删除多个元素，可以使用循环来遍历并删除这些元素。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>删除多个 DOM 元素示例</title>
</head>
<body>
    <ul id="myList">
        <li>要删除的列表项1</li>
        <li>要删除的列表项2</li>
        <li>要删除的列表项3</li>
    </ul>

    <button onclick="removeElements()">删除元素</button>

    <script>
        function removeElements() {
            var elements = document.getElementById("myList").getElementsByTagName("li");

            for (var i = 0; i < elements.length; i++) {
                elements[i].remove();
            }
        }
    </script>
</body>
</html>

在这个示例中，通过 getElementsByTagName("li") 方法获取所有 li 元素，然后遍历并删除每一个 li 元素。点击按钮后，所有的列表项都会被成功删除。

删除指定类名的元素

有时候，需要删除具有特定类名的元素。可以通过 getElementsByClassName() 方法来获取这些元素，并进行删除操作。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>删除指定类名的 DOM 元素示例</title>
</head>
<body>
    <div class="delete">要删除的元素1</div>
    <div class="delete">要删除的元素2</div>
    <div class="delete">要删除的元素3</div>

    <button onclick="removeElements()">删除元素</button>

    <script>
        function removeElements() {
            var elements = document.getElementsByClassName("delete");

            while (elements.length > 0) {
                elements[0].remove();
            }
        }
    </script>
</body>
</html>

在这个示例中，通过 getElementsByClassName("delete") 方法获取所有具有 delete 类名的元素，并使用 while 循环来删除这些元素。点击按钮后，所有具有 delete 类名的元素都会被成功删除。

删除特定索引的元素

有时候，需要删除数组中的特定索引的元素。在 JavaScript 中，可以使用 splice() 方法来实现删除。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>删除特定索引的 DOM 元素示例</title>
</head>
<body>
    <ul id="myList">
        <li>元素1</li>
        <li>元素2</li>
        <li>元素3</li>
    </ul>

    <button onclick="removeElement(1)">删除第二个元素</button>

    <script>
        function removeElement(index) {
            var elements = document.getElementById("myList").getElementsByTagName("li");

            elements[index].remove();
        }
    </script>
</body>
</html>

在这个示例中，通过 removeElement(1) 来删除第二个列表项。点击按钮后，第二个列表项会被成功删除。

总结

在本文中，我们介绍了如何使用 JavaScript 来删除 DOM 元素，包括使用 remove() 方法、parentNode.removeChild() 方法、循环删除多个元素、删除指定类名的元素、删除特定索引的元素等方法。通过这些技巧，你可以轻松地操作 DOM 元素，并根据需要来删除它们。