44

是否可以删除除了 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;
     }
}

谢谢！

4

7 回答 7

102

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

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

更新

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

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

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

于 2009-11-26T18:03:52.557 回答
20 
childDiv.remove();

适用于 Chrome 25.0.1364.155

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

请参见此处：对 caniuse 上的 childnode-remove 的引用

于 2013-03-18T15:12:36.790 回答
16

我认为你可以做类似的事情......

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

有关详细信息，请参阅node.parentNode。

于 2009-11-26T18:04:36.220 回答
6 
document.body.removeChild(child);
于 2009-11-26T18:03:50.857 回答
4

outerHTML使用属性删除元素

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

function remElement(obj) {
obj.outerHTML="";
}
于 2013-09-19T05:09:02.087 回答
1

此函数使用 id 简单地删除元素：

function removeElement (id) { 
  document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}
于 2016-12-06T17:30:11.800 回答
1

OK，从 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 上的此链接。

于 2017-05-17T12:32:36.463 回答