✔ DOM Kind Knoten löschen

F

FipsTheThief

Erfahrenes Mitglied
Also ich bin bei JavaScript und XML / DOM nicht sonderlich bewandert und versuche eben herrauszufinden wie ich einen erstellten Kindknoten wieder löschen kann.

Das ist was ich nun habe , und zwar erstelle ich mir ein neues Element a weise dem Element alle Werte zu die man möchte was ja auch klappt er erstellt mir brav diesen Knoten und der Link existiert.

Bei erneuten klicken soll dann dieser Knoten gelöscht werden , und zwar dann wenn die checkbox nicht mehr aktiv ist.

HTML: 
  <html><head><title>Test</title></head>
  <body>
  <table>
    <tr>
  	<td>
  	 <form name="adresse" action="#">
  	   <input type="checkbox" name="show_adress" value="" onclick="showtree()">
  	  </form>
  	</td>
  	<td id="Liste">
  	  <a>link</a>
  	  <a>link2</a>
  	</td>
    </tr>
  </table>
  
  <script language="JavaScript" type="text/javascript">
  <!--
  
  function showtree(){
  
  	if(document.adresse.show_adress.checked){
  	
  	 var link = document.createElement("a");		 
  	 var link_name = document.createTextNode("vCard importieren");
  	 link.appendChild(link_name);
  
  	 var Ausgabebereich = document.getElementById("Liste");
  	 Ausgabebereich.appendChild(link);
  		  
  	 var Ausrichtung = document.createAttribute("href");
  		 Ausrichtung.nodeValue = "http://www.ffa4dow.de";
  	 var Element = document.getElementsByTagName("a")[2];
  		 Element.setAttributeNode(Ausrichtung);
  	 
  	}else{
  	var Knoten=document.getElementsByTagName("td")[1].firstChild;
  	document.getElementById("Liste").removeChild(Knoten);
  	}
  
  }
  //-->
  </script>
  </body></html>

Das ganze macht er fast , und zwar löscht er immer den 1. knoten dann also den 1. Link.

Also der momentane Ablauf ist so , man sieht 2 links und davor 1 Checkbox. Er erstellt nun 1 Link.man deaktiviert die checkbox er löscht noch nichts. Man klickt erneut auf die Checkbox nun hängt er noch einen Knoten dran.
Jetzt beim 4. Klick dem deaktivieren löscht er nun den 1.Kind Knoten auf einmal.Danach geht das wieder von vorne los.

Wenn er genau 5 neue Kindknoten erstellt hat dann arbeitet er komischer weise korrekt. Er erstellt ein Kindknoten und löscht den ersten wieder.Und das geht nicht so recht in meinen Kopf rein warum :/

Eventuell weiss einer rat für mich.
 
Ehm sry für Doppel Thread :/ Der Rechner auf Arbeit ist so langsam das man denkt der brennt gleich ab , und es wurde ewig nicht aktualisiert.

Inzwischen hab ich was hingezaubert was auch so funktioniert endlich nach ~3 Stunden :( Da kann man dumm bei werden wenn ich ehrlich bin. :

Noch klar Ausbaufähig das man es noch etwas dynamischer gestaltet da sich die Links immer neu eingebaut werden und alles über die Funktion regelt.
Aber mit dem JavaScript Tree Menu hier im Tutorial kam ich so erstmal gar nicht klar , wohl auch keine Nerven mehr :)

Warum dieses mit der for schleife nicht geklappt hat kann ich mir nicht erklären mit der do while tut er es komischer weise.Wobei es eigentlich das gleiche ist.

Wenn sowas mal jemand benötigt oder mehr Ahnung als ich momentan kann man sicher noch was schickes draus machen :)

HTML: 
  <html><head><title>Test</title></head>
  <body>
  <table>
    <tr>
      <td colspan=2>
       <form name="adresse" action="#">
         <input type="checkbox" name="show_adress" value="" onclick="showtree()"><a href="#">Link</a>
        </form>
      </td>      
      </tr>
      <tr>
      <td colspan=3>
       <p id="Liste"></p>
      </td>
    </tr>
  </table>
  
  <script language="JavaScript" type="text/javascript">
  <!--
  
  function showtree(){
  
      if(document.adresse.show_adress.checked){
      
       var br = document.createElement("br");
  
       var link = document.createElement("a");
       var link_name = document.createTextNode("vCard importieren");
       link.appendChild(link_name);
  
       var Ausgabebereich = document.getElementById("Liste");
       Ausgabebereich.appendChild(link);
       Ausgabebereich.appendChild(br);
            
       var Ausrichtung = document.createAttribute("href");
           Ausrichtung.nodeValue = "http://www.ffa4dow.de";
       var Element = document.getElementsByTagName("a")[1];
           Element.setAttributeNode(Ausrichtung);
           
       var link = document.createElement("a");
       var link_name = document.createTextNode('TextFile importieren');
       link.appendChild(link_name);
       
       var Ausgabebereich = document.getElementById("Liste");
       Ausgabebereich.appendChild(link);
            
       var Ausrichtung = document.createAttribute("href");
           Ausrichtung.nodeValue = "http://www.tutorials.de";
       var Element = document.getElementsByTagName("a")[2];
           Element.setAttributeNode(Ausrichtung);     
       
      }else{
          var i = 0;    
          do{
              var Knoten=document.getElementById("Liste").childNodes[i];
              document.getElementById("Liste").removeChild(Knoten);
          }while( i <= document.getElementById("Liste").childNodes.length);
      }
  }
 
FipsTheThief hat gesagt.:
Inzwischen hab ich was hingezaubert was auch so funktioniert endlich nach ~3 Stunden
Zum Vergrößern anklicken....
Wenn du eine Lösung erarbeitet hast, dann markiere den Thread bitte auch als erledigt.

Vielen Dank ;)
 
michaelsinterface hat gesagt.:
Wenn du eine Lösung erarbeitet hast, dann markiere den Thread bitte auch als erledigt.

Vielen Dank ;)
Zum Vergrößern anklicken....

Sry wurde auch sofort erledigt :) Wenn nun noch wer ein Tutorial zu DOM / JavaScript kennt wäre ich ja Wunschlos glücklich :) Das meiste hier war für den Anfang ein wenig mystisch , aber je länger ich darüber nachdenke desto mehr begreife ich davon irgendwie.
 
Jups danke da habe ich mich gestern schon mal schlau gemacht , ist auf jeden Fall einen Blick wert.

Und nun noch mal die neue verbesserte Funktion mit ein wenig PHP :)

HTML: 
 <html>
 <head>
 <script language="JavaScript" type="text/javascript">
 <!--
 	var link_value = new Array();
 	var link_count;
    
 	function getLinks(wert){
 		 
 		values = wert.split("#");
 		link_count = values.length;
 		
 		for(i = 0; i<values.length;i++){
 		   link_value[i] = values[i].split(";");
 		}  
 	  }	  
 
 	function showtree(){
 		 
 		if(document.adresse.show_adress.checked){
 		
 			for(i=0;i<link_count;i++){ 
 		    	 var br = document.createElement("br");	    		 
 
 				 var link = document.createElement("a");
 		    	 var link_space = document.createTextNode("&nbsp;");
 		    	 var link_name  = document.createTextNode(link_value[i][1]);
 				 link.appendChild(link_space);
 				 link.appendChild(link_name);
 			
 		    	 var Ausgabebereich = document.getElementById("Liste");
 				 Ausgabebereich.appendChild(link);
 				 Ausgabebereich.appendChild(br);
 					 
 		    	 var Ausrichtung = document.createAttribute("href");
 		    		 Ausrichtung.nodeValue = link_value[i][0];
 		    	 var Element = document.getElementsByTagName("a")[i+1];
 		    	     Element.setAttributeNode(Ausrichtung);
 			}		 
 		}else{
 			var j = 0;	
 			do{
 		    	var Knoten=document.getElementById("Liste").childNodes[j];
 		    	document.getElementById("Liste").removeChild(Knoten);
 			}while( j < document.getElementById("Liste").childNodes.length);
 		}
 	}
 //-->
 </script>
 </head>
 <body>
 <form name="adresse" action="#">
 <table>
   <tr>
 	<td colspan=2>
 <?php
 
    $x1 = array(0 => "http://www.ffa4dow.de;www.ffa4dow.de",1 =>"http://www.tutorials.de;tutorials.de", 2 => "http://www.panoflex.de;www.panoflex.de", 3 => "http://www.irgendwas.de ; irgendwas" );
    
    function get_array_elements($array){
    $return ="";
 	   for($i = 0 ; $i < count($array) ; $i++){
 		  $return .= $array[$i]."#";
 	   }
 	   return(substr($return,0,strlen($return)-1));
    }
  
    echo '<input type="checkbox" name="show_adress" value="" onclick="getLinks(\''.get_array_elements($x1).'\');showtree()">';
 ?>
 	   <a href="#">Adressbuch</a></td></tr>
 	<tr>
 	<td id="Liste">
 	</td>
   </tr>
 </table>
 </body>
 </html>

Eine übergabe der ID's fehlt noch so könnte man sich gemütlich mehere solcher Threads erstellen zum Beispiel.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück