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

Update

中删除该元素。您可以将其设置为 HTMLElement 上的新方法：

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

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

Answer 2

childDiv.remove();

适用于 Chrome 25.0.1364.155

请注意，这不适用于 IE11 或 Opera Mini，但所有其他浏览器都支持。

请参阅此处：caniuse 上的 childnode-remove 参考

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，然后再次删除作为 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：

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]);

如果您想了解更多信息，请访问此