如何在 JavaScript 中從 DOM 中刪除元素

上週，我們研究瞭如何使用 vanilla JavaScript 創建新元素並將其插入 DOM。今天，讓我們看看如何使用 JavaScript 從 DOM 中刪除元素。

有兩個 在 JavaScript 中從 DOM 中刪除元素的方法。您可以使用內聯樣式隱藏元素，也可以將其完全移除。

隱藏 JavaScript 中來自 DOM 的元素，可以使用 DOM 樣式屬性：

// grab element you want to hide
const elem = document.querySelector('#hint');

// hide element with CSS
elem.style.display = 'none';

如上所示，我們只是將元素的顯示類型更改為 none 在 style 的幫助下 財產。如果您暫時想從 DOM 中隱藏元素，並希望在某個時候根據用戶交互將其恢復，這種方法非常有用。

或者，如果您想刪除 完全來自 DOM 的元素，您可以使用 removeChild() 屬性：

// grab element you want to hide
const elem = document.querySelector('#hint');

// remove element
elem.parentNode.removeChild(elem);

removeChild() 方法刪除指定元素的給定子節點。它將刪除的節點作為 Node 返回 對象，或 null 如果節點不存在。它適用於所有現代和舊瀏覽器，包括 Internet Explorer。

ES6 remove() 方法

removeChild() 方法可以很好地刪除元素，但您只能在 parentNode 上調用它 要刪除的元素。

刪除元素的現代方法是使用 remove() 方法。只需在要從 DOM 中刪除的元素上調用此方法，如下所示：

// grab element you want to hide
const elem = document.querySelector('#hint');

// remove element from DOM (ES6 way)
elem.remove();

這種方法是在 ES6 中引入的，目前僅適用於現代瀏覽器。但是，您可以使用 polyfill 使其與 Internet Explorer 9 及更高版本兼容。