Discussion :

[persia]

Bonjour,

Je souhaite supprimer un champs input une fois l'avoir ajouté dynamiquement à l'aide d'une liste déroulante. Le problème se pose avec IE. Le nouveau nœud ajouté ne se supprime pas et je n'ai aucun message d'erreur. Par contre, les nœuds qui existaient déjà dans ma page se suppriment. Donc, le bug est avec les nouveaux nœuds que j'ajoute.

Code Javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function ajouterAnimal(select) { 
var option = select.options[select.selectedIndex]; 
var ul = select.parentNode.getElementsByTagName('ul')[0]; 
var choix = ul.getElementsByTagName('input'); 
var li = document.createElement('li'); 
var input = document.createElement('input'); 
var text = document.createTextNode(option.firstChild.data);  
input.type = 'text'; 
input.value = option.value; 
li.appendChild(input); 
li.appendChild(text); 
li.setAttribute('onclick', 'this.parentNode.removeChild(this);'); ul.appendChild(li); 
}

Html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<ul>
<li onclick="this.parentNode.removeChild(this);">
<input type="text" value="Cheval" />  Cheval </li>
<li onclick="this.parentNode.removeChild(this);"> 
<input type="text"  value="Tigre" /> Tigre </li>  
</ul> 
 
<select onchange="ajouterAnimal(this);">
<option value="Chien">Chien</option> 
<option value="Chat">Chat</option>
</select>

Est-ce moi qui ne respecte pas les standards ou c'est IE qui déconne ?

Merci

[Bisûnûrs]

IE gère très mal la fonction setAttribute().

Modifie ton code en ce sens :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

li.onclick = function() { this.parentNode.removeChild(this); };

[RomainVALERI]

en tout cas, la méthode setAttribute (quel que soit le navigateur) n'a pas pour fonction d'attribuer des gestionnaires d'événement, même si ces gestionnaires peuvent effectivement être atteints par l'intermédiaire de propriétés html...
A priori, la manière "propre" d'ajouter des gestionnaires d'événement à un élément, c'est de passer par addEventListener (FF & autres) / attachEvent (IE) ... mais loin de moi l'idée de te faire déconsidérer le conseil de Bisûnûrs (notamment parce que la solution qu'il propose fonctionne très bien )

[Bisûnûrs]

Et parce que l'on n'a pas des codes différents pour chaque navigateur.

Cela dit, on peut toujours se faire une fonction addEvent() qui va gérer ces différences et appeler cette fonction quand on veut attribuer un évènement.

[RomainVALERI]

Cela dit, on peut toujours se faire une fonction addEvent() qui va gérer ces différences et appeler cette fonction quand on veut attribuer un évènement.

Jusqu'à maintenant je m'en tiens presque toujours à cette solution, mais je suis prêt à en changer si un projet l'exige bien sûr ^^

[persia]

IE gère très mal la fonction setAttribute().

Modifie ton code en ce sens :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

li.onclick = function() { this.parentNode.removeChild(this); };

Merci, le code fonctionne bien sous IE, mais j'ai crée un tableau que je vais parcourir afin de savoir si vraiment les éléments ajoutés ou supprimés sont à jour.

Donc, j'ai ajouté une nouvelle balise à mon input:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
input.name='animaux[]';
 
var tab=document.forms['form1'].elements['animaux[]'];
 
alert(tab.length);

Code html:

J'ai ajouté le champs name="animaux[]" dans chaque input.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<li onclick="this.parentNode.removeChild(this);">  
<input type="hidden" name="animaux[]" value="Cheval" />  Cheval </li> 
...

Encore une fois, IE ne met pas à jour mon tableau animaux, alors que FF si.

Est-ce un bug avec le input.name que IE ne reconnait pas ?

J'ahis IE

[Bovino]

Pour IE, l'attribut name est readonly. Tu ne peux donc pas l'attribuer dynamiquement, les explications et l'astuce sont dans la FAQ

[persia]

Pour IE, l'attribut name est readonly. Tu ne peux donc pas l'attribuer dynamiquement, les explications et l'astuce sont dans la FAQ

Merci bien.