HTML - DOM 元素 remove() 方法

remove() 方法允许您完全从网页中删除一个元素。

语法

element.remove();

参数

此方法不接受任何参数。

返回值

remove() 方法不返回任何值。

HTML DOM 元素“remove()”方法示例

以下是 remove() 方法在 HTML DOM 元素中不同场景下的示例。

单击删除列表项

此示例演示了如何使用 remove() 方法通过单击删除按钮逐一删除列表 (<li>)。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Removing a List Item</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>remove() Method</h2>
    <p>Click button and remove the list items!!</p> 
    <ul>
        <li>Apple 1
            <button onclick="remove(this)">Remove</button>
        </li>
        <li>Apple 2 
            <button onclick="remove(this)">Remove</button>
        </li>
        <li>Apple 3
            <button onclick="remove(this)">Remove</button>
        </li>
    </ul>

    <script>
        function remove(button) {
            button.parentNode.remove();
        }
    </script>
</body>

</html>

删除段落元素

此示例演示了如何使用 remove() 方法通过单击删除按钮从网页中删除段落 (<p>) 元素。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Removing a Paragraph Element</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>remove() Method</h2>
    <p>Click the button to remove a paragraph!!</p> 
    <p id="p">This is a paragraph.</p>

    <button onclick="removeParagraph()">
        Remove Paragraph
    </button>

    <script>
        function removeParagraph() {
            const paragraph=document.getElementById('p');
            paragraph.remove();
        }
    </script>
</body>

</html>

支持的浏览器

方法
remove()	是	是	是	是	是

html_dom_element_reference.htm

打印页面