JS 删除标签|极客笔记

JS 删除标签

在网页开发中，经常会遇到需要删除页面中的某个标签的情况。使用JavaScript可以很方便地实现这一功能。本文将详细介绍如何使用JavaScript删除HTML标签。

1. 使用removeChild方法

要删除一个HTML标签，可以使用DOM操作中的removeChild方法。这个方法可以从其父节点中删除一个子节点。首先需要选中要删除的标签，然后调用其父节点的removeChild方法即可。

<!DOCTYPE html>
<html>
<head>
    <title>删除标签示例</title>
</head>
<body>
    <div id="parent">
        <p id="child">要删除的标签</p>
    </div>

    <button onclick="deleteTag()">删除标签</button>

    <script>
        function deleteTag() {
            var parent = document.getElementById('parent');
            var child = document.getElementById('child');
            parent.removeChild(child);
        }
    </script>
</body>
</html>

在上面的示例中，我们首先给需要删除的标签赋予一个id，然后通过document.getElementById方法选中该标签。在deleteTag函数中，我们先选中父节点parent，然后调用removeChild方法删除子节点child，即要删除的p标签。

2. 使用parentNode属性

除了removeChild方法之外，还可以使用parentNode属性来删除一个HTML标签。parentNode属性返回当前节点的父节点，在删除标签时可以直接调用该属性的removeChild方法。

<!DOCTYPE html>
<html>
<head>
    <title>删除标签示例</title>
</head>
<body>
    <div id="parent">
        <p id="child">要删除的标签</p>
    </div>

    <button onclick="deleteTag()">删除标签</button>

    <script>
        function deleteTag() {
            var child = document.getElementById('child');
            child.parentNode.removeChild(child);
        }
    </script>
</body>
</html>

在上面的示例中，我们直接使用child.parentNode.removeChild(child)来删除要删除的p标签。这种方法相对更为简洁，也是常用的删除标签的方式之一。

3. 使用innerHTML属性

另一种删除标签的方式是通过innerHTML属性。我们可以直接将包含要删除标签的父标签的innerHTML属性设置为空字符串来删除整个内容。

<!DOCTYPE html>
<html>
<head>
    <title>删除标签示例</title>
</head>
<body>
    <div id="parent">
        <p id="child">要删除的标签</p>
    </div>

    <button onclick="deleteTag()">删除标签</button>

    <script>
        function deleteTag() {
            var parent = document.getElementById('parent');
            parent.innerHTML = '';
        }
    </script>
</body>
</html>

在上面的示例中，我们直接将parent的innerHTML属性设置为空字符串，从而删除了包含的p标签。这种方法比较简单，适用于一次性删除整个内容的情况。

4. 替换标签

有时候我们并不想完全删除一个标签，而是想将其替换成另一个标签。这时候可以使用replaceChild方法来实现。

<!DOCTYPE html>
<html>
<head>
    <title>替换标签示例</title>
</head>
<body>
    <div id="parent">
        <p id="child">要替换的标签</p>
    </div>

    <button onclick="replaceTag()">替换标签</button>

    <script>
        function replaceTag() {
            var parent = document.getElementById('parent');
            var newTag = document.createElement('h1');
            newTag.innerHTML = '替换成功!';
            parent.replaceChild(newTag, document.getElementById('child'));
        }
    </script>
</body>
</html>

在上面的示例中，我们首先通过document.createElement方法创建一个新的h1标签，并设置其内容为“替换成功!”。然后调用parent.replaceChild方法，将新标签替换掉原来的p标签。