Archivlink: javarea.de Forum > JavaScript > Löschen funktioniert nur mit erster Variante
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Löschen funktioniert nur mit erster Variante

Pages: [1]
geschrieben von clshtml am 03.09.2008 - 17:39
Hallo,
ich will mit JavaScript mehrere CheckBoxen in einer Form/div löschen.
Für die Fehlersuche (Fehler: Objekt erforderlich) habe ich zwei Varianten erstellen. In der ersten Variante werden die CheckBoxen mit dem Laden der Seite erzeugt. Ein Klick auf den Button Löschen löscht wie gewünscht alle CheckBoxen.
In der zweiten Variante werden die CheckBoxen mit JavaScript erzeugt (Button neuer Eintrag). Nach einem Klick auf den Button Löschen wird die Fehlermeldung "Objekt erforderlich" angezeigt. Form-Name und div-Namen sind in beiden Varianten gleich. Offensichtlich werden die CheckBoxen anders erzeugt, so dass beim Löschen die Knoten nicht stimmen.
Hat jemand eine Lösung von euch, damit auch Variante zwei funktioniert?

Steffan


VARIANTE 1
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 

<body> 
  <input type="button" name="btnLöschen" value="Löschen" 
    onclick="loeschen();"> 

    <br><br> 

    <form action="main.php" name="Schraube" method="post" style="font:0.8em Verdana; color:#708090; 
        height:350px; width:250px; background:#E7E7E7; margin-left:10px; padding:5px; overflow:hidden; float:left"> 
      <div style="width:100%; height:88%; overflow:auto; margin-top:5px"> 
        <div id="Schrauben" style="width:200%"> 
        <input type="checkbox" name="SchraubeX" value="0"> Eintrag1 <br> 
        <input type="checkbox" name="SchraubeX" value="0"> Eintrag2 <br> 
        <input type="checkbox" name="SchraubeX" value="0"> Eintrag3 <br> 
        <input type="checkbox" name="SchraubeX" value="0"> Eintrag4 <br> 
        <input type="checkbox" name="SchraubeX" value="0"> Eintrag5 <br> 
        </div> 
      </div> 
    </form> 

    <script type="text/javascript"> 
        function loeschen() { 
         for (var j=document.Schraube.elements.length-1; j>=0; j--) { 
          if(document.Schraube.elements[j].type == 'checkbox') { 
           var node01 = document.getElementById('Schrauben'); 
   var node02 = document.getElementById(document.Schraube.elements[j].name); 
   var node03 = document.getElementById(document.Schraube.elements[j].name).nextSibling; 
   node01.removeChild(node02); 
   node01.removeChild(node03); 
   
          } 
         } 
        } 
    </script> 
</body>


VARIANTE 2
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 

<body> 
    <input type="button" name="btnLöschen" value="Löschen" onclick="loeschen();"> 
    <input type="button" name="btnNeu" value="neuer Eintrag" onclick="neueEintraege();"> 

    <br><br> 

    <form action="main.php" name="Schraube" method="post" style="font:0.8em Verdana; color:#708090; 
        height:350px; width:250px; background:#E7E7E7; margin-left:10px; padding:5px; overflow:hidden; float:left"> 
      <div style="width:100%; height:88%; overflow:auto; margin-top:5px"> 
        <div id="Schrauben" style="width:200%"> 
        </div> 
      </div> 
    </form> 

    <script type="text/javascript"> 
        function loeschen() { 
         for (var j=document.Schraube.elements.length-1; j>=0; j--) { 
          if(document.Schraube.elements[j].type == 'checkbox') { 
           var node01 = document.getElementById('Schrauben'); 
   var node02 = document.getElementById(document.Schraube.elements[j].name); 
   var node03 = document.getElementById(document.Schraube.elements[j].name).nextSibling; 
   node01.removeChild(node02); 
   node01.removeChild(node03);    
          } 
         } 
        } 
         
         
        function neueEintraege() { 
          for (var i=0; i<6; i++){ 
//---------- CheckBox erzeugen ---------- 
var objCheckBox = document.createElement("input"); 
objCheckBox.type = "checkbox"; 
objCheckBox.name = "SchraubeX"; 
objCheckBox.value = "0"; 
document.getElementById('Schrauben').appendChild(objCheckBox); 

//---------- Bezeichnung für die CheckBox erzeugen ---------- 
var strCheckBoxText = document.createTextNode('Schraube ' + i); 
document.getElementById('Schrauben').appendChild(strCheckBoxText); 

//---------- Zeilenumbruch ---------- 
var objBr = document.createElement("br"); 
document.getElementById('Schrauben').appendChild(objBr); 
      } 
        } 
    </script> 
</body>

geschrieben von Micha am 03.09.2008 - 21:03
Hi,

ein paar alert-Ausgaben würden Dir sicher gut tun, um zu debuggen:

HTML-Quelltext
1: 

alert( document.getElementById(document.Schraube.elements[j].name)+"   "+document.Schraube.elements[j].name);


Deine nodes sind nicht definiert, da es keine *ID* SchraubeX gibt.

Gruß Micha

geschrieben von clshtml am 03.09.2008 - 22:01

Hallo Micha,
SchraubeX ist der Name der CheckBoxen.
Um den Fehler zu finden, habe ich extra die beiden Varianten erstellt. In Variante 1 werden die CheckBoxen "SchraubeX" mit dem Laden der Webseite, also ohne JavaScript erzeugt. Und in Varainte 2 werden die CheckBoxen "SchraubeX" mit JavaScript nach dem Laden der Seite erzeugt. Nur in Varainte 1 funktioniert das Löschen.
Wo liegt der Unterschied bzw. der Fehler? Oder übersehe ich etwas?


Steffan

geschrieben von Micha am 04.09.2008 - 09:36
Hi,

wie ich schon schrieb: Es gibt einfach keine ID mit dem Namen, sodass
HTML-Quelltext
1: 

document.getElementById
eben NULL zurück liefert. Und weil das im ersten Beispiel auch so ist, funktioniert dieses nicht - der IE ist hier ggf. etwas großzüger und nimmt, wenn er keine ID findet den Namen aber das macht auch nur dieser. Ein Browser wird Dir hier ebenfalls einen Fehler liefern

Micha

geschrieben von clshtml am 04.09.2008 - 09:57
Hallo Micha,
jetzt habe ich es verstanden. Mit der zusätzlichen Zeile
objCheckBox.id = "SchraubeX";
werden die CheckBoxen endlich gelöscht.
Dies bedeutet doch, dass in Variante 1 die ID-Eigenschaft von der CheckBox automatisch erzeugt wird?

Nun habe ich ein weiteres Problem:
Nach dem Löschen ist die Form leer. Wenn ich aber danach neu CheckBoxen erzeuge, dann werden diese unterhalb der "alten, unsichtbaren CheckBoxen" angeodnet. So, als wenn die alten CheckBoxen nicht vollständig gelöscht wurden.
Wie kann ich die alten CheckBoxen endgültig löschen, so dass die neuen CheckBoxen wieder ganz oben eingefügt werden?


Steffan

geschrieben von Micha am 04.09.2008 - 10:32
Hi,

wenn Du Fragen zu selbsterstellten Code hast, dann solltest Du diesen auch zeigen
Vermututng: Es existierten ja noch Umbrüche (<BR>); werden die auch gelöscht? Prüfe doch mal, ob childNodes.length wirklich 0 (Null) ist, dann weißt Du, Du hast alles entfernt; wenn nicht, dann eben noch einmal removeChild() drüberlaufen lassen:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

var parentElement = document.forms[0];
while (parentElement.childNodes.length > 0)
  parentElement.removeChild(parentElement.childNodes[0]);

//Prüfeung
alert( parentElement.childNodes.length +"\n" + parentElement.innerHTML );


Micha


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.