RemoveChild ne décale pas les noeuds suivants

Bonjour,

Je débute Javascript et ceci est mon premier script alors n'hésitez pas à me dire "les bonnes façon de faire"

Donc voila j'ai un formulaire avec en dernier lieu, le moyen d'ajouter des communes. Cela ce fait simplement avec un select et un bouton ajouter.

La fonction associée à ce bouton génère une div avec un textNode contenant l'élément précédemment sélectionné, un bouton supprimer et un textarea.

Le problème est que lorsque j'ajoute plusieurs communes, et que j'en supprime une (autre que la dernière ajoutée) et bien les div suivantes ne se décalent pas vers le haut et restent à leurs positions initiale en recouvrant le reste du contenu...

Le plus surprenant c'est que quand je survol le bouton supprimer, tout ce remets correctement.

A noté que le noeud est bien supprimé car quand je vérifie les infos envoyées de mon formulaire, tout correspond.

Ci dessous le code de ma fonction suivi du css associé (ça a peut être un rôle après tout !)

Note importante : je dois dev que pour IE 7

var consigne = "Ajouter des rues.";
var nb_com = 0;

function ajouterCommune(){
	nb_com++;
	
	var liste = document.getElementById('listeCom');
	var indice = liste.selectedIndex;
	var valeur = liste.options[liste.selectedIndex].value;
		
	var cadreDiv = document.createElement("div");	
	cadreDiv.id = nb_com;
	cadreDiv.className = "ajoutCom";
	cadreDiv.name = valeur;
	
	var libDiv = document.createElement("div");	
	libDiv.className = "libDiv";	
	
	var label = document.createTextNode(valeur);		
	
	var bouton = document.createElement("button");
	bouton.className = "bouton";
	bouton.id=nb_com;
	bouton.appendChild(document.createTextNode("Supprimer"));
	bouton.supprimer = 
	function(){
		alert("L'élement "+cadreDiv.id+" "+cadreDiv.name+" va etre supprimé.");
		document.getElementById('divInsert').removeChild(cadreDiv);
		liste.add(new Option(valeur, valeur), 0);		
	}
	bouton.onclick = bouton.supprimer;
	
	var txtDiv = document.createElement("div");
	txtDiv.className = "txtDiv";	
	
	var area = document.createElement("textarea");
	area.rows = 4;
	area.cols = 50;
	area.value = consigne;
	area.name = valeur;	
	area.effacer= 	
	function(){
		if(area.value==consigne)area.value='';
	}
	area.onfocus = area.effacer;		
	
	
	libDiv.appendChild(label);
	libDiv.appendChild(bouton);
	txtDiv.appendChild(area);
	cadreDiv.appendChild(libDiv);
	cadreDiv.appendChild(txtDiv);
	
	document.getElementById('divInsert').appendChild(cadreDiv);
	liste.removeChild( liste.options[indice]);
}

.ajoutCom {
	position: relative;
	overflow: hidden;
	background-color: #505050;
	padding: 10px 0;
	margin: 10px 2%;
}
.libDiv{	
	position:relative;
	width:87%;	
	margin-left: 6.5%;
	padding-bottom: 3%;
}
.txtDiv{
	margin-left: 6.5%;
}
#boutonJS{
	background-color: #363535;
}
#boutonJS:hover{
	background-color: #FF9900;
}

Merci de vos réponses
Modifié par Mc Flurry (30 May 2011 - 09:11)

Bonjour,

Mc Flurry a écrit :
Note importante : je dois dev que pour IE 7

==> Oh, le pauvre!

Ton code HTML nous ferait bien plaisir aussi! Merci!

A+

a écrit :
==> Oh, le pauvre!

C'est une vraie galère...

<div class='fieldset'>
<div class='legend'>Créer une nouvelle archive</div>				
	<form method='POST' name='forminsert' action='RootController.php' >
	<div id='divInsert'>
		<p> <label for='id_sit'>Site</label> <select name='id_sit' id='id_sit' style='width: 135px'>".self::siteGenerator()."</select> </p>
		<p>
		<span>Energie : </span>
			<label for='energie_E'>Elec.</label><input class='radio' type=\"radio\" name='energie' id=\"energie_E\" value='E' checked=\"checked\" /> 
			<label for='energie_G'>Gaz</label><input class='radio' type=\"radio\" name='energie' id=\"energie_G\" value='G' />
		</p>
		<p> <label for='num_aff'>N° d'affaire</label> <input class='champs' id='num_aff' name='num_aff' type='text' size='10' tabindex='10' /> </p> 
		<p> <label for='ca'>Chargé d'affaire</label> <input class='champs' id='ca' name='ca' type='text' size='20' tabindex='30'/> </p> 
		<p> <label for='listeCom'>Commune impactée</label> <select name='listeCom' id='listeCom' style='width: 135px'>".self::communeGenerator($communes)."</select> 
		<input class='bouton' type='button' value='Ajouter' onclick=\"ajouterCommune();\"/>
		</p>
	</div>
	<p> <input class='bouton' type='submit' id='valider' value='Valider'/> </p>
	</form>
</div>

les méthodes "Generator" récupère un tableau de données de la db et servent à créer mes <option>.

Edit1 : Depuis que j'ai lu l'article sur display: inline-block je me sens con avec mon tableau !
Edit2 : Changement de code html, ça simplifie la vie !
Modifié par Mc Flurry (30 May 2011 - 15:45)

Bonjour,
merci de tes corrections pour mon code html, j'avais pas fais attention au double id... par contre je ne comprend pas le double label pour les radio, je leur ai mi le meme nom pour pouvoir ensuite les récupérer via $_POST['energie'] et ce indépendamment de la valeur cochée.

Je mets à jour mon code html et mon code js des précédent posts.