Supprimer un noeud après l'avoir ajouté
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:
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:
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
