Nik: Div löschen

Hallo Forum,

Es gelingt mir gerade nicht, ein zuvor per Javascript erzeugtes DIV wieder zu löschen.

Ich kenne den Namen des DIV und ich kann prüfen, ob es existiert.

  
if (document.getElementById('tetete')) {  
alert('vorhanden');  
}  

Aber mein Ansinnen, dieses DIV bei Vorhandensein zuerst zu löschen und erst danach erneut zu generieren, schlägt fehl.

  
document.getElementById('tetete').removeChild(document.getElementById('tetete'));  

scheint nicht das DIV zu löschen.

Warum?

Genauso wenig arbeitet folgender Code für mich:

  
    while (document.getElementById('tetete').childNodes.length > 0) {  
        document.getElementById('tetete').removeChild(document.getElementById('tetete').lastChild);  
    }  
  

Warum?

Nik

  1. Warum?

    Du gehst in Deinem Skript falsch davon aus, dass Dein <div id="tetete"> ein Kind eines Elements mit der ID "tetete" ist. Selbst wenn es händisch so notiert wäre, dann wäre es schlicht unzulässig, also falsch.

    Wie wäre es denn mit etwas wie einem schlichten

    document.body.removeChild(document.getElementById('tetete'));  
    
    

    Also: Elternobjekt.removeChild(Kindobjekt)

    Jörg Reinholz

    1. Hallo Jörg,

      Also: Elternobjekt.removeChild(Kindobjekt)

      funktioniert das immer? Ich dachte, removeChild wirkt nur auf direkte Kinder und nicht auf Enkel.

      Gruß, Jürgen

      1. Hallo Jörg,

        Also: Elternobjekt.removeChild(Kindobjekt)

        funktioniert das immer? Ich dachte, removeChild wirkt nur auf direkte Kinder und nicht auf Enkel.

        Und warum schreibe ich wohl "Elternobjekt"?

        Für das Skriptbeispiel habe ich dann ganz bewusst "Wie wäre es denn mit etwas" notiert.

        Grund:

        Der von Nik gezeigte Quelltext gibt nichts her, woraus ich schließen kann, wo im Kirschbaum der Strick hängt an dem man ziehen muss, damit der Apfel dem Herrn Newton auf die Birne fällt.

        Jörg Reinholz

        1. Hallo Jörg,

          Also: Elternobjekt.removeChild(Kindobjekt)

          funktioniert das immer? Ich dachte, removeChild wirkt nur auf direkte Kinder und nicht auf Enkel.

          Und warum schreibe ich wohl "Elternobjekt"?

          meine Nachfrage war aus Interesse, weil ich mir nicht sicher bin, wie eng der Begriff "Elternobjekt" im DOM gefasst ist.

          Gruß, Jürgen

        2. Das "alles" erschlagende Beispiel:

          <html>  
          <head>  
          <title>Test</title>  
          <script type="text/javascript">
          
          function ftxRemoveElement(id) {  
                // löscht Element mit gegebener ID an beliebiger Stelle im DOM:  
                if  ( document.getElementById(id) ) {  
                    document.getElementById(id).parentNode.removeChild(document.getElementById(id));  
                } else {  
                    alert ('Element "'+ id + '" ist nicht (mehr) vorhanden!');  
                    // oder was auch immer...  
                }  
          }
          
          </script>  
          </head>  
          <body>  
          <div id="test">  
             <div id="foo">Foo</div>  
             <div id="bar">Bar</div>  
          </div>  
          <input type="button" onclick="ftxRemoveElement('foo')" value="Foo löschen" />  
          <input type="button" onclick="ftxRemoveElement('bar')" value="Bar löschen" />  
          </body>  
          </html>  
          
          

          So mit FF 20, Opera 12.15 und Chromium 25 getestet.

          Jörg Reinholz

          1. function ftxRemoveElement(id) {

            // löscht Element mit gegebener ID an beliebiger Stelle im DOM:
                  if  ( document.getElementById(id) ) {
                      document.getElementById(id).parentNode.removeChild(document.getElementById(id));
                  } else {
                      alert ('Element "'+ id + '" ist nicht (mehr) vorhanden!');
                      // oder was auch immer...
                  }
            }

              
            Nur braucht man document.getElementById nicht dreimal hintereinander aufrufen. Einmal reicht, und das Element kann man in einer Variable speichern.  
              
            Außerdem gibt es in der neuen DOM-Spezifikation die [remove-Methode](http://www.w3.org/TR/domcore/#dom-childnode-remove), die das Entfernen vereinfacht. Diese könnte man schon nutzen, wenn der Browser sie unterstützt.  
              
            Beispiel:  
              
            ~~~javascript
            function removeElement (id) {  
              var element = document.getElementById(id);  
              if (!element) throw new Error('Element nicht gefunden: ' + id);  
              if (element.remove) {  
                element.remove();  
              } else {  
                element.parentNode.removeChild(element);  
              }  
            }
            

            Mathias

      2. Moin,

        angenommen du hast ein Element x, dann kannst du es folgendermaßen lösen:

        x.parentNode.removeChild(x);

        Ähnlich, wie die Funktion "eineFunktion" es hier löst.

        Grüße Marco

        --
        Ich spreche Spaghetticode - fließend.
    2. Also: Elternobjekt.removeChild(Kindobjekt)

      hi joerg,

      einverstanden.

      Aber dann haette doch meine Loeschschleife funktionieren muessen, wenn jeweils anstatt "tetete" die ID des Parentelementes notiert gewesen waere, oder?

      Denn das hatte ich auch versucht...

      Nik

      1. Also: Elternobjekt.removeChild(Kindobjekt)

        Denn das hatte ich auch versucht...

        Schaust Du hier

        Jörg Reinholz

  2. Hallo Nik,

    document.getElementById('tetete').removeChild(document.getElementById('tetete'));

      
    das Element 'tetete' ist nicht sein eigenes Kind, sondern das seiner Eltern (parentNode).  
      
    Gruß, Jürgen