刪除dom元素而不知道它的父類？

是否有可能刪除除身體標記之外沒有其他父項的dom元素？我知道用jQuery這樣的框架很容易，但我試圖堅持直接的JavaScript。刪除dom元素而不知道它的父類？

下面的代碼，我發現以其他方式做到這一點：

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; 
    } 
}

謝謝！

來源

2009-11-26 Matrym

僅供參考'身體'是一個完全有效的父母。 – 2009-11-26 18:19:53

每個元素都有一個父元素 – iConnor 2014-01-12 23:02:27

@connorspiracist，除了'document' – 2014-01-13 09:28:11

你應該能夠得到元素的父元素，然後從

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

更新刪除元素

您可以將此作爲對HTML元素的新方法：

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

然後做el.remove()（這也將返回元素）

來源

2009-11-26 18:03:52

更新到正確的答案，因爲它更模塊化/包容不同的場景。謝謝。 – Matrym 2012-11-20 03:18:21

document.body.removeChild(child);

來源

2009-11-26 18:03:50 Gregoire

@unknown：此答案僅適用於「document.body」的直接後代節點。其他答案適用於所有情況，包括'document.body'的後代。 – 2009-11-26 18:21:43

如上所述，這個答案只適用於身體後代的元素。有人可以適應這個嗎？ – 2009-11-27 12:22:03

閱讀下面的問題：«一個沒有父母以外的身體標記的DOM元素»，所以我的回覆是完全可變的 – Gregoire 2009-11-27 14:04:01

我認爲你可以做這樣的事情......

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

對更多的信息，請參閱node.parentNode。

來源

2009-11-26 18:04:36

childDiv.remove();

作品在Chrome 25.0.1364.155

請注意，這並不在IE11和Opera Mini的工作，但所有其他瀏覽器的支持。

在這裏看到：reference to childnode-remove on caniuse

來源

2013-03-18 15:12:36 swervo

實際上應該得到更多的選票 – shabunc 2013-12-11 17:29:18

不適用於IE11 – Seb 2015-07-17 10:25:53

正如這裏記錄的那樣https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove - 包括一個polyfill – commonpike 2015-09-30 09:55:36

刪除元素使用outerHTML財產

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

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

來源

2013-09-19 05:09:02 vusan

此功能，只需使用ID刪除元素：

function removeElement (id) { 
    document.getElementById(id).parentElement.removeChild(document.getElementById(id)); 
}

來源

2016-12-06 17:30:11

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有消除被廣泛使用，如（）函數：

$('#navigation').remove();

也有本地ChildNode.remove()這是不是在IE和舊瀏覽器，但你可以填充它，看看蘇從MDN ggested填充工具：

填充工具
可以填充工具的remove（）方法在Internet Explorer 9和更高用下面的代碼：

//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。

來源

2017-05-17 12:32:36 Alireza

刪除dom元素而不知道它的父類？

回答

相關問題