使用 JavaScript RemoveChild 刪除頁面元素 [示例]

Node.removeChild() 方法通過 DOM 從當前頁面中刪除 HTML 元素。本文將向您展示如何使用它。

JavaScript 中的 DOM

HTML DOM（文檔對像模型）是 JavaScript 用來與 HTML 頁面元素交互的接口，包括添加、刪除和修改屏幕項目。

它是代表頁面上每個 HTML 標籤的數據結構——從包裝頁面的根元素到每個

、

、和 - 頁面上的所有內容都在 DOM 中表示，包括其內容和結構。

每個 HTML 元素在 DOM 中都表示為一個節點 – 頁面元素的抽象。

DOM 是添加、刪除和更新頁面上可見和不可見 HTML 元素的首選方式。例如，基於用戶輸入或通過 API 檢索的數據，它是從表中添加或刪除行或從 JavaScript 下拉列表中添加或刪除選項的理想方式。

removeChild() 方法必須從 DOM 節點對象調用，語法如下：

NODE.removeChild(CHILD);

請注意：

使用 removeChild() 方法，我們必須首先有一個 HTML 元素（將在 DOM 中表示）才能使用。列表就是一個很好的例子，因為可以使用 removeChild() 刪除項目：

<ul id="my-list">
    <li>List item 1</li>
    <li id="remove-me">List item 2</li>
</ul>

在上面，使用 id 創建了一個簡單的 HTML 列表 我的列表 .

以下 JavaScript 將刪除 ID 為 remove-me 的列表項使用 removeChild() 方法：

var myList = document.getElementById('my-list');
var removeMe = document.createElement('remove-me');
myList.removeChild(removeMe);

首先，使用 getElementById() 檢索 HTML DOM 中的現有列表 .

最後，removeChild() 可用於移除 id 為 remove-me 的元素從現有列表 my-list .

也可以使用 removeChild 在不知道父元素細節的情況下：

var removeMe = document.getElementById('remove-me');
removeMe.parentNode.removeChild(node);

上面，parentElement() 用於訪問要刪除元素的父級的方法，以便 removeChild() 可以調用它。

要添加子元素而不是刪除它，請改用 appendChild()。