JS刪除DOM元素方法詳解

一、從JS刪除DOM元素

在JS中，可以使用removeChild()方法從DOM中刪除元素。該方法會將指定元素的父節點中刪除指定元素。

    
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.removeChild(child);
    

上述代碼會從具有id「parent」的元素中刪除具有id「child」的元素。

除了removeChild()方法外，也可以使用parentNode.removeChild(child)方法刪除元素。

二、從DOM中刪除所有匹配的元素

使用JS，可以使用querySelectorAll()方法來匹配一組元素，並使用forEach()方法循環刪除：

    
var elements = document.querySelectorAll('.elements');
[].forEach.call(elements, function(element) {
  element.parentNode.removeChild(element);
});
    

上述代碼將所有類名為elements的元素從DOM中刪除。

三、使用JQ刪除DOM元素

使用JQ，可以使用remove()方法來刪除DOM元素。remove()方法可從DOM中刪除一個或多個元素。

    
$('.element').remove();
    

上述代碼將所有類名為「element」的元素從DOM中刪除。

四、使用jQuery刪除DOM元素

在jQuery中，也可以使用remove()方法從DOM中刪除元素。remove()方法可從DOM中刪除一個或多個元素。

    
$('.element').remove();
    

上述代碼將所有類名為「element」的元素從DOM中刪除。

五、JS刪除DOM元素最後一個

最後一個元素可以使用lastChild屬性來刪除

    
var parent = document.getElementById("parent");
parent.removeChild(parent.lastChild);
    

上述代碼將從ancestor元素的子元素中刪除最後一個元素。

六、使用原生JS如何刪除DOM元素

使用原生JS，可以使用remove()方法來刪除DOM元素。對於較舊的瀏覽器，可以使用Polyfill來實現該方法。

    
Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
document.getElementById("element").remove();
    

上述代碼添加了一個remove()方法來刪除DOM元素，然後使用remove()方法刪除具有id「element」的元素。

七、總結

刪除DOM元素有多種方法，使用JS、JQ或jQuery都可以輕鬆刪除DOM元素。然而，最重要的是根據實際情況選擇適當的方法。