Entfernen dom Element ohne seine Eltern zu kennen?

Question

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!

Answer 1

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)

Answer 2

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

Answer 3

Ich glaube, Sie so etwas wie ...

tun können

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

Siehe node.parentNode für weitere Informationen auf das.

Answer 4

document.body.removeChild(child);

Answer 5

Entfernen von Elemente mit outerHTML Eigenschaft

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

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

Answer 6

Diese Funktion einfach entfernt ein Element ID mit:

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

Answer 7

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.