Entfernen dom Element ohne seine Eltern zu kennen?
-
05-07-2019 - |
Frage
Ist es möglich, ein DOM-Element zu entfernen, die keine übergeordnete anderen als der Body-Tag hat? Ich weiß, das mit einem Framework wie jQuery einfach sein würde, aber ich versuche, gerade Javascript zu bleiben.
Hier ist der Code, den ich gefunden habe, es zu tun anders:
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;
}
}
Danke!
Lösung
Es sollte möglich sein, die Eltern des Elements zu erhalten, entfernen Sie dann das Element aus, dass
function removeElement(el) {
el.parentNode.removeChild(el);
}
Aktualisieren
Sie können dies als eine neue Methode für das Htmlelement festgelegt:
HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }
Und dann tun el.remove()
(was auch das Element zurück)
Andere Tipps
childDiv.remove();
Arbeiten in Chrome 25.0.1364.155
Beachten Sie, dass dies nicht in IE11 oder Opera Mini funktioniert aber wird von allen anderen Browsern unterstützt.
Sehen Sie hier: Bezug auf caniuse childNode zu entfernende
Ich glaube, Sie so etwas wie ...
tun könnenvar child = document.getElementById(childDiv);
//var parent = document.getElementById(parentDiv);
child.parentNode.removeChild(child);
Siehe node.parentNode für weitere Informationen auf das.
document.body.removeChild(child);
Entfernen von Elemente mit outerHTML
Eigenschaft
remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));
function remElement(obj) {
obj.outerHTML="";
}
Diese Funktion einfach entfernt ein Element ID mit:
function removeElement (id) {
document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}
OK, Sie im Grunde brauchen nicht die Eltern zu wissen, ein DOM-Element von DOM zu löschen, auf dem Code unten schauen, sehen Sie, wie der Auftrag ist ein Knotenelement in JavaScript zu löschen:
Element
+ parentNode
+ removeChild(Element);
Wie Sie sehen wir finden das Element zuerst, dann .parentNode verwenden und dann das Kind entfernen, die das Element wieder an ist, so brauchen wir nicht an alle Eltern wissen!
sehen also jetzt den echten Code:
var navigation = document.getElementById('navigation');
if(navigation) {
navigation.parentNode.removeChild(navigation);
}
oder als Funktion
function removeNode(element) {
if(element) { //check if it's not null
element.parentNode.removeChild(element);
}
} //call it like : removeNode(document.getElementById('navigation'));
Auch hat jQuery () Funktion entfernen, die weithin verwendet wird, wie:
$('#navigation').remove();
Auch gibt es einheimische ChildNode.remove()
, die nicht in IE und alten Browsern ist, aber man kann es POLYfill, suchen die vorgeschlagene polyfill von MDN:
Polyfill
Sie können die Methode remove () in Internet Explorer 9 und höher POLYfill mit dem folgenden Code:
//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]);
Wenn Sie mehr darüber erfahren, besuchen Sie diese Link auf MDN.