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

StackOverflow https://stackoverflow.com/questions/1804991

  •  05-07-2019
  •  | 
  •  

题

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

谢谢！

有帮助吗？

解决方案

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

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

<强>更新

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

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

然后执行 el.remove（）（也会返回元素）

其他提示

childDiv.remove();

适用于Chrome 25.0.1364.155

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

请参阅此处：引用childnode-remove on caniuse

我认为你可以做点像...... 

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

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

document.body.removeChild(child);

使用 outerHTML 属性

删除元素 
remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));

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

此函数只需使用id：

删除元素 
function removeElement (id) { 
  document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}

好的，你基本上不需要知道父DOM从DOM中删除DOM元素，查看下面的代码，看看在JavaScript中删除节点元素的顺序如何：

元素 + 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上的链接。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top