JS删除元素|极客笔记

JS删除元素

在编写 JavaScript 代码时，经常会涉及到操作 DOM 元素，其中包括向页面中增加、修改或删除元素。本文将重点介绍如何使用 JavaScript 来删除元素。

使用 removeChild 方法

要删除一个元素，最简单的方法就是使用其父元素的 removeChild 方法。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>删除元素</title>
</head>
<body>
    <div id="container">
        <p>这是一个段落。</p>
        <button onclick="deleteParagraph()">删除段落</button>
    </div>

    <script>
        function deleteParagraph() {
            var container = document.getElementById('container');
            var paragraph = document.querySelector('p');
            container.removeChild(paragraph);
        }
    </script>
</body>
</html>

在上面的示例中，当用户点击按钮时，会调用 deleteParagraph 函数，该函数通过 getElementById 和 querySelector 方法找到要删除的段落元素，并通过 removeChild 方法从父元素中删除该元素。

使用 remove 方法

除了使用 removeChild 方法外，ES6 还引入了 remove 方法，可以更直接地删除一个元素。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>删除元素</title>
</head>
<body>
    <div id="container">
        <p>这是一个段落。</p>
        <button onclick="deleteParagraph()">删除段落</button>
    </div>

    <script>
        function deleteParagraph() {
            var paragraph = document.querySelector('p');
            paragraph.remove();
        }
    </script>
</body>
</html>

在上面的示例中， deleteParagraph 函数直接调用了段落元素的 remove 方法，从而删除了该元素。

删除多个元素

如果需要删除多个元素，可以遍历它们并逐个删除。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>删除元素</title>
</head>
<body>
    <ul id="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <button onclick="deleteItems()">删除列表项</button>

    <script>
        function deleteItems() {
            var list = document.getElementById('list');
            var items = list.getElementsByTagName('li');
            for (var i = items.length - 1; i >= 0; i--) {
                list.removeChild(items[i]);
            }
        }
    </script>
</body>
</html>

在上面的示例中，通过 getElementsByTagName 方法获取所有的列表项元素，并通过循环遍历删除它们。

删除指定元素

有时候可能需要根据特定的条件来删除某个元素。以下是一个示例，演示如何根据类名来删除元素：

<!DOCTYPE html>
<html>
<head>
    <title>删除元素</title>
</head>
<body>
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
    <button onclick="deleteItemByClass()">根据类名删除元素</button>

    <script>
        function deleteItemByClass() {
            var items = document.getElementsByClassName('item');
            for (var i = items.length - 1; i >= 0; i--) {
                items[i].remove();
            }
        }
    </script>
</body>
</html>

在上面的示例中，通过 getElementsByClassName 方法获取所有具有 item 类名的元素，并删除它们。

删除后检查是否删除成功

在删除元素之后，可以通过打印父元素的 innerHTML 属性来检查是否成功删除。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>删除元素</title>
</head>
<body>
    <div id="container">
        <p>这是一个段落。</p>
        <button onclick="deleteParagraph()">删除段落</button>
    </div>

    <script>
        function deleteParagraph() {
            var container = document.getElementById('container');
            var paragraph = container.querySelector('p');
            paragraph.remove();
            console.log(container.innerHTML);
        }
    </script>
</body>
</html>

在上面的示例中，删除段落后打印了父元素 container 的 innerHTML，以确认段落元素已被成功删除。