从生活入手学编程：js删除指定元素的15种方法

这篇文章距离上次修改已过437天，其中的内容可能已经有所变动。

在JavaScript中，删除DOM中指定元素的方法有很多种。以下是15种删除指定元素的方法：

使用parentNode.removeChild()方法：




var element = document.getElementById("myElement");
element.parentNode.removeChild(element);

使用remove()方法：




var element = document.getElementById("myElement");
element.remove();

使用outerHTML赋值为空字符串：




var element = document.getElementById("myElement");
element.outerHTML = "";

使用innerHTML赋值为空：




var element = document.getElementById("myElement").parentNode;
element.innerHTML = "";

使用querySelector()和remove()结合：




document.querySelector("#myElement").remove();

使用querySelector()和parentNode.removeChild()结合：




document.querySelector("#myElement").parentNode.removeChild(document.querySelector("#myElement"));

使用querySelectorAll()和forEach()结合：




document.querySelectorAll(".myElement").forEach(function(node) {
  node.parentNode.removeChild(node);
});

使用childNodes结合removeChild()：




var element = document.getElementById("myElement").parentNode;
element.childNodes.forEach(function(node) {
  if (node === element) {
    element.removeChild(node);
  }
});

使用children结合remove()：




var element = document.getElementById("myElement");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

使用children结合forEach()和remove()：




Array.from(document.getElementById("myElement").children).forEach(function(node) {
  node.remove();
});

使用children结合forEach()和removeChild()：




Array.from(document.getElementById("myElement").parentNode.children).forEach(function(node) {
  if (node.id === "myElement") {
    node.parentNode.removeChild(node);
  }
});

使用querySelector()和remove()结合，删除所有匹配的元素：




document.querySelectorAll(".myElement").forEach(function(node) {
  node.remove();
});

使用querySelector()和parentNode.removeChild()结合，删除单个匹配的元素：




document.querySelector("#myElement").parentNode.removeChild(document.querySelector("#myElement"));

使用document.createElement()创建新元素替换旧元素：

从生活入手学编程：js删除指定元素的15种方法

评论已关闭

推荐阅读