在不知道其父级的情况下删除 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;
     }
}   

谢谢！

Answer 1

您应该能够获取元素的父元素，然后从中删除元素

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

更新

您可以将其设置为 HTMLElement 上的新方法：

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

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

Answer 2

childDiv.remove();

适用于 Chrome 25.0.1364.155

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

请看这里：reference to childnode-remove on caniuse

Answer 3

我认为你可以做类似...

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

有关更多信息，请参阅node.parentNode。

Answer 4

document.body.removeChild(child);

Answer 5

使用outerHTML 属性删除元素

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

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

Answer 6

这个函数可以简单地使用 id 删除一个元素：

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

Answer 7

好的，从 DOM 中删除 DOM 元素基本上不需要知道父节点，看下面的代码，看看 JavaScript 中删除节点元素的顺序是怎样的：

Element + parentNode + removeChild(Element);

如你所见，我们首先找到元素，然后使用 .parentNode ，然后再次删除作为元素的子元素，所以我们根本不需要知道父元素！

所以现在看看真正的代码：

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：

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 上的 link。