Nik: Div löschen

SELF-Forum

Div löschen

Nik
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div löschen

    Jörg Reinholz
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Div löschen

      JürgenB Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Div löschen

        Jörg Reinholz
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Div löschen

          JürgenB Homepage des Autors
          – Informationen zu den Bewertungsregeln

          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

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Div löschen

          Jörg Reinholz
          – Informationen zu den Bewertungsregeln

          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

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Div löschen

            molily Homepage des Autors
            +5 Informationen zu den Bewertungsregeln

            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

            --
            Chaplin.js – JavaScript application architecture using Backbone.js.
            Beitrag melden
            +5
            Informationen zu den Bewertungsregeln

      2. Div löschen

        misterunknown Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Div löschen

      Nik
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Div löschen

        Jörg Reinholz
        – Informationen zu den Bewertungsregeln

        Also: Elternobjekt.removeChild(Kindobjekt)

        Denn das hatte ich auch versucht...

        Schaust Du hier

        Jörg Reinholz

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Div löschen

    JürgenB Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln