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元素。然而，最重要的是根据实际情况选择适当的方法。