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中删除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浏览器和旧浏览器中，但您可以对其进行填充，从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上的link。

在不知道父元素的情况下删除dom元素？

7 个答案: