不知道父元素如何删除DOM元素？

Question

如何删除没有父元素（除了body标签）的DOM元素？我知道使用像jQuery这样的框架可以轻松实现，但我想坚持使用纯JavaScript。

以下是我在其他地方找到的代码：

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}   

谢谢！

- Matrym

---

FYI，“body”是一个完全有效的父元素。 - Crescent Fresh

每个元素都有一个父元素。 - iConnor

@connorspiracist 除了 document。 - Adam Hopkinson

@adam document 不是一个元素，它是一个节点（文档节点），因此不被归类为元素。 - iConnor

没有添加到树中的文档片段没有父级。 - David Given

Answer 1

你应该能够获取元素的父级，然后从父级中移除该元素。

function removeElement(el) {
el.parentNode.removeChild(el);
}

更新

你可以将这个设置为HTMLElement的一个新方法：

HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }

然后执行 el.remove()（这也会返回该元素）

- Adam Hopkinson

---

更新到正确答案，因为它更模块化/包容不同的情况。谢谢。 - Matrym

Answer 2

childDiv.remove();

在Chrome 25.0.1364.155中可用。

请注意，这在IE11或Opera Mini中不起作用，但受到所有其他浏览器的支持。

请参见：caniuse上关于childnode-remove的参考资料

- swervo

---

如此记录在这里 https://developer.mozilla.org/zh-CN/docs/Web/API/ChildNode/remove - 包括一个 polyfill。 - commonpike

刚刚测试了一下。$("#answer-15480206").remove()，但是我必须刷新页面才能给你点赞。 - Chase Roberts

Answer 3

我认为你可以这样做...

var child = document.getElementById(childDiv);
//var parent = document.getElementById(parentDiv);
child.parentNode.removeChild(child);

请查看node.parentNode获取更多信息。

- Robert K

Answer 4

document.body.removeChild(child);

- Gregoire

---

@unknown：此答案仅适用于作为 document.body 直接后代的节点。其他答案适用于包括 document.body 后代在内的所有情况。 - Crescent Fresh

与上述相同，此答案仅适用于作为body的直接子元素。有人可以进行中介吗？ - Adam Hopkinson

读取问题：“一个除了body标签之外没有父元素的dom元素”，因此我的回答是完全有效的。 - Gregoire

Answer 5

使用outerHTML属性删除元素

remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));

function remElement(obj) {
obj.outerHTML="";
}

- vusan

Answer 6

这个函数是用来通过id简单地删除一个元素：

function removeElement (id) { 
  document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}

- Saranga Jayaruwan

Answer 7

好的，从DOM中删除DOM元素时，你基本上不需要知道其父级元素，看下面的代码，看一下JavaScript中删除节点元素的顺序：

Element + parentNode + removeChild(Element);

正如你所见，我们首先找到元素，然后使用.parentNode并再次删除子元素（即Element），因此我们根本不需要知道父级元素！

现在看看真正的代码：

var navigation = document.getElementById('navigation');
if(navigation) {
  navigation.parentNode.removeChild(navigation);
}

或者作为一个函数。

function removeNode(element) {
  if(element) { //check if it's not null
    element.parentNode.removeChild(element);
  } 
} //call it like : removeNode(document.getElementById('navigation'));

此外，jQuery 还有 remove() 函数，被广泛使用，例如：

$('#navigation').remove();

还有原生的ChildNode.remove()方法，但是在IE和旧版浏览器中不支持，但是你可以使用polyfill进行填充，参考MDN提供的建议：

Polyfill
你可以使用以下代码在Internet Explorer 9及以上版本中填充remove()方法：

//from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

如果您想了解更多信息，请访问 MDN 上的 链接。

- Alireza