Affecter un nouveau node par un événement js

Bonjour tout le monde,

Depuis deux jours je m'entraîne sur la manipulation du DOM pour rendre un formulaire dyn amique mais là je suis tombé sur un os et ca fait une journée que je fouille le net de fond en comble pour trouver une solution mais je ne trouve rien, ou plus précisement rien qui ne marche.

Alors voilà ma page déjà (pas eu le courage de remettre une version qui marchait à peu près donc là y'a des alerte tout). Sur le papier c'est simple : j'ai un bouton qui ajoute un champ text avec un lien (un p dans mon cas) associé à ce champ qui permet de le supprimer lui précisement.

Voila mon js pour faire ca:

function del(position){
	var text_fieldset = document.getElementById("zone_text"); //[#green]On se place au niveau de notre premier fielset[/#]
	var labels = text_fieldset.getElementsByTagName("label");
	alert("taille:"+labels.length+" position:"+position);
	for(var i=position;i<labels.length;i++){
		var label = labels[ i];
		var input = label.getElementsByTagName("input")[0];
		var lien_del = label.nextSibling;
		input.removeAttribute("onChange");
		input.setAttribute("onChange","javascript:refresh("+i+")");
		input.onChange = function(){
			refresh(i);
		}
		lien_del.removeEventListener("mouseup",function(){
			del(i+1);
		},true);
		lien_del.addEventListener("mouseup",function(){
			del(i);
		},true);
		/*[#green]lien_del.setAttribute("onmouseup","javascript:del("+i+")");
		lien_del.onmouseup = function (){
			del(i);
		}[/#]*/
		//[#green]alert(lien_del.getAttribute("onMouseUp"));[/#]
		label.firstChild.nodeValue = "Valeur "+i+" ";
		//[#green]alert("i="+i+" <"+lien_del.nodeName+" "+lien_del.attributes[2].name+"=\""+lien_del.attributes[2].value+"\">("+lien_del.attributes.length+")");[/#]
	}
	//[#green]Suppression de la zone de texte, du lien et du saut de ligne[/#]
	var label = labels[position-1];
	var lien = label.nextSibling;
	var br = lien.nextSibling;
	text_fieldset.removeChild(label);
	text_fieldset.removeChild(lien);
	text_fieldset.removeChild(br);
	
	alert(text_fieldset.innerHTML);
	
}

function add(){
	var count = document.getElementsByTagName("label").length; //[#green]On compte le nombre d'éléments de type label[/#]
	var text_fieldset = document.getElementById("zone_text"); //[#green]On se place au niveau de notre premier fielset[/#]
	count ++; //[#green]On incrémente notre compteur parce qu'on rajoute un élément[/#]
	if (document.all) var ie = true;
	//[#green]création du label[/#]
	var nom_label = document.createTextNode("Valeur "+count+" "); //[#green]On crée virtuellement "Valeur x"[/#]
	var input = document.createElement("input"); //[#green]On crée virtuellement <input />[/#]
	input.setAttribute("type","text"); //[#green]<input /> devient <input type="text"/>[/#]
	input.setAttribute("name","nom"+count); //[#green]<input type="text"/> devient <input type="text" name="nom"/>[/#]
	input.setAttribute("onChange","javascript:refresh("+count+")"); //[#green]<input type="text" name="nom"/> devient <input type="text" name="nom" onChange="javascript:refresh("+count+")"/>[/#]
	input.onchange = function(){
		refresh(count); //[#green]Gestion de la particularité d'ie qui n'accepte pas d'ajouter un evement avec setAttribute. ie ignore la ligne au dessus, ff ignore cette ligne[/#]
	}
	var label = document.createElement("label"); //[#green]On crée virtuellement <label></label>[/#]
	label.appendChild(nom_label); //[#green]On accroche "Valeur x" à la fin des enfants de label (donc au début puisqu'il n'y en a pas)[/#]
	label.appendChild(input); //[#green]On accroche <input type="text" name="nom" onChange="javascript:refresh("+count+")"/> à la fin des enfants de label[/#]
	
	//[#green]Création des élement br et a
	var br = document.createElement("br"); //[#green]On a virtuellement crée <br />[/#]
	var del_text = document.createTextNode("Supprimer"); //[#green]Oon a virtuellement crée "Supprimer"[/#]
	var lien_del = document.createElement("p"); //[#green]On a virtuellement crée <p></p>[/#]
	lien_del.setAttribute("class","lien"); //[#green]<p></p> devient <p class="lien"></p>[/#]
	lien_del.setAttribute("className","lien"); //[#green]<p></p> devient <p class="lien"></p> Gestion de l'exception ie, ie ignore la ligne au dessus, ff ignore cette ligne[/#]
	lien_del.addEventListener("mouseup",function(){
		del(count);
	},true);
	/*[#green]lien_del.setAttribute("onmouseup","javascript:del("+count+")"); //[#green]<p class="lien"></p> devient <p class="lien" onClick="javascript:del("+count+")"></p>[/#]
	*/lien_del.onmouseup = function(){
		del(count); //[#green]Gestion de la particularité d'ie qui n'accepte pas d'ajouter un evement avec setAttribute. ie ignore la ligne au dessus, ff ignore cette ligne[/#]
	}
	lien_del.appendChild(del_text); //[#green]<p class="lien" onClick="javascript:del("+count+")"></p> devient <p class="lien" onClick="javascript:del("+count+")">Supprimer</p>[/#]
	
	  
	/*[#green]var del_text = document.createTextNode("Supprimer");
	var lien_del = document.createElement("p");
	lien_del.className = "lien";
	lien_del.onmouseup  = function (){
		del(count);
	}
	lien_del.appendChild(del_text); [/#]*/

	//[#green]On raccroche ici tous nos éléments virtuelles à une balises de notre fichier XHTML. Ils sont alors afficher	[/#]
	text_fieldset.appendChild(label);
	text_fieldset.appendChild(lien_del);
	text_fieldset.appendChild(br);
	
	//[#green]Ajout d'un élément d'option vide dans notre liste[/#]
	var liste = document.getElementById("liste_deroulante");
	var select = liste.getElementsByTagName("select")[0];
	var option = document.createElement("option");
	var texte = document.createTextNode("");
	option.appendChild(texte);
	select.appendChild(option);
}

Donc l'ajout marche bien et je peux supprimer le bon input lorsque je clique une première fois sur un lien supprimer. Mais j'ai logiquement besoin de mettre à jour tous les input suivants pour décaler le nombre passé en paramètre à jour (le décrémenter d'un). Et à prioris quelque soit la méthode utilisé c'est là que ca coince.

j'ai essayé pas mal de chose dans un epu tous les sens:

setAttribute()
.onEvenement =
addEventListener()

....

Donc si quelqu'un voit une faille dans mon code où dans ma logique je suis preneur parce que moi je sèche là ^^
Modifié par Fedaykin (11 Jan 2006 - 13:31)

Je ne suis pas sûr que ça changera quelque chose à ton problème, mais je serais toi, j'éviterais :
xxx.setAttribute('onchange', ...);
pour se pencher vers un sytaxe plus communément admise comme :
xxx.onchange = ... ;
ou
xxx.addEventListener('change', ..., false);
xxx.attachEvent('onchange', ... );

Ok je vais essayer de regarder ca...

Je vous tiens au courant