Element direkt aus DOM entfernen

[j-l-n]

Wenn man ein Element aus dem DOM entfernen möchte, muss man immer erst den Weg über das Elternelement gehen.
Dies kann man zwar nicht umgehen, aber man kann sich eine praktische kleine Helferfunktion bauen:

function deleteElementById(ID){
  var el = document.getElementById(ID);
  el.parentElement.removeChild(el);
}

Object.defineProperty(
  Element.prototype,
  "remove", {
    enumerable: false,
    value: function(){ 
      if (this.parentElement){
        this.parentElement.removeChild(this);
      }
      else {
        throw new TypeError("Element is not in DOM.");
      }
    }
  }
);

Danach kann man Elemente folgendermaßen einfach entfernen:

//<div id="ID"></div>
deleteElementById("ID");

//var element = document.createElement("div");
//document.body.appendChild(element);
element.remove();

 

[mikdoe]

Du scheinst dir langsam eine eigene Lib zu bauen, was?

 

[j-l-n]

Nö, das nicht. Aber für die Sachen die ich häufiger brauche, schreibe ich mir zurzeit einige Helferfunktionen - jQuery mag ich persönlich nicht, und da ich es selten nutze, lohnt es sich meist nicht, es extra nur für ein paar Sachen einzubinden.
Und ich möchte mich schon seit längerem in Korbinians kkjs einarbeiten - vielleicht find ich jetzt mal die Zeit dafür.

 

[mikdoe]

jQuery mag ich persönlich nicht

Ah ok, das erklärt einiges. Dachte mir schon manchmal, warum nimmt er dafür nicht jQuery?

Und ich möchte mich schon seit längerem in Korbinians kkjs einarbeiten

Ja, das ist bestimmt ein guter Weg. Ich hab jetzt jQuery schon überall verbaut, ansonsten würde ich wahrscheinlich auch kkjs verwenden, wenn es lizenztechnisch passt.

 

[rico2009]

Ah ok, das erklärt einiges. Dachte mir schon manchmal, warum nimmt er dafür nicht jQuery?

Das gleiche habe ich mir auch gedacht und wollte auch schon entsprechend antworten. Mit JQuery ist das nämlich wirklich sehr simpel. Dann habe ich mich aber daran erinnert das er schon mal irgendwo gesagt hatte, dass er kein JQuery mag. Somit hatte sich mein Post erledigt.

 

[kkapsner]

Ich würde die Funktion ja nicht kill nennen, sondern remove. Das Element wird dabei ja nicht zerstört, sondern "nur" aus dem DOM ausgehängt. Zusätzlich wurde ich in der Funktion noch prüfen, ob this.parentNode auch wirklich etwas enhält und dann eine etwas aussagekräftigere Fehlermeldung als "TypeError: a.parentElement is null" ausgeben:

Object.defineProperty(
  Element.prototype,
  "remove", {
    enumerable: false,
    value: function(){
      if (this.parentElement){
        this.parentElement.removeChild(this);
      }
      else {
        throw new TypeError("Element is not in DOM.");
      }
    }
  }
);

Und ich möchte mich schon seit längerem in Korbinians kkjs einarbeiten - vielleicht find ich jetzt mal die Zeit dafür.

Gerne. Über Input (egal ob Bugs, Anregungen oder sogar Code) würde ich mich freuen. Aber die Dokumentation ist an manchen Stellen noch sehr dürftig...

wenn es lizenztechnisch passt

Dazu müsste ich mir erst mal eine Lizenz aussuchen...

Warscheinlich wäre es sowas wie: Creative Commons — Attribution-ShareAlike 4.0 International — CC BY-SA 4.0

 

[j-l-n]

Ich würde die Funktion ja nicht kill nennen, sondern remove.

Zusätzlich wurde ich in der Funktion noch prüfen, ob this.parentNode auch wirklich etwas enhält.

Danke für den Hinweis, habe ich oben verbessert.

Gerne. Über Input (egal ob Bugs, Anregungen oder sogar Code) würde ich mich freuen. Aber die Dokumentation ist an manchen Stellen noch sehr dürftig...

Ich hab mir jetzt mal die ganzen DOM-Sachen angeschaut, aber alles, was mir noch eingefallen wäre, hast du schon eingebaut
Dann ist mir noch die Idee eines Shim für querySelectorAll() gekommen, aber das wird entgegen meiner Erwartung in so gut wie allen Browsern unterstützt: Can I use... Support tables for HTML5, CSS3, etc

 

[kkapsner]

In kkjs.css ist eine Selektorengine drin - aber die wollte ich schon lange mal überarbeiten...