在不知道父元素的情況下刪除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中不起作用，但所有其他瀏覽器都支持。

請參閱此處： 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中刪除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上的此鏈接 。