Suppression d'un élément ajouté dynamiquement [Résolu]

[flapy]

Bonjour,

J'ai fais un script permettant d'ajouter dynamiquement un élément à un formulaire et de le supprimer à l'aide d'un bouton.

Cela donne quelque chose comme ça :

Element [Supprimer]
Element [Supprimer]
[Ajouter]


Voici le code HTML :

Code :

1
2
3
4
5
6
7
8
9
10
 
<div id="parentDiv">
	<h2>Quel modèle de PC possédez-vous ?</h2>
	<p id="dynForm">
		<input type="text" value="1" name="nomPC"  /> 
		<button name="Supprimer" onclick="suppr()">Supprimer</button>
	</p>
	<button name="Ajouter" onclick="ajout()">Ajouter </button> <br/>
	<input type="submit" value="Valider"/>
</div>

Et voici le code Javascript :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function ajout(){
		parentDiv = document.getElementById("parentDiv");
		dynForm = document.getElementById("dynForm");
		clown = dynForm.cloneNode(true);
		parentDiv.insertBefore(clown, dynForm);
	}
 
	function suppr(){
		parentDiv = document.getElementById("parentDiv");
		child = document.getElementById("dynForm");
		parentDiv.removeChild(child);
	}

Lorsqu'on clique sur ajouter, l'élément avec son bouton est bien créé.
Par contre, le problème se pose à la suppression d'un élément.
Comment faire comprendre au script que c'est bien l'élément sur lequel on clique que l'on veut supprimer.
Alors qu'actuellement dans mon code, c'est toujours le premier élément qui est supprimé.

Merci à toutes les bonnes volontés !

[Bovino]

Ben là, tu ajoutes à chaque fois des éléments avec le même id, ce qui n'est pas autorisé, donc getElementById ne pourra pas bien fonctionner...
De plus :

Comment faire comprendre au script que c'est bien l'élément sur lequel on clique que l'on veut supprimer.

Euh... l'élément sur lequel tu cliques, c'est le bouton !

[mekal]

si je comprend bien tu veut supprimer sa

Code :

1
2
3
4
5
 
<p id="dynForm">
		<input type="text" value="1" name="nomPC"  /> 
		<button name="Supprimer" onclick="suppr()">Supprimer</button>
	</p>

utilise le this

Code :

1
2
onclick="suppr(this)">Supprimer</button>

et dans la fonction il faut faire reference au parent du bouton qui fera lui meme appel a son parent

Code :

1
2
3
4
5
6
 
function suppr(lui){
 
var parent_du bouton=lui.parentNode
parent_du bouton.parentNode.removeChild(parent_du bouton);
	}

[javatwister]

a priori, si on considère que les champs ne sont pas vraiment "ordonnés" ni "organisés", tu peux te contenter de supprimer le dernier (??)

ce qui donne ça: http://javatwist.imingo.net/ajouform.php

[flapy]

Envoyé par mekal

si je comprend bien tu veut supprimer sa

Code :

utilise le this

Code :

et dans la fonction il faut faire reference au parent du bouton qui fera lui meme appel a son parent

Code :

Merci MEKAL tas solution fonctionne. Il fallait donc utiliser le THIS.
Problème résolu !