Discussion :

[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 :

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

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 :

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

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 !

[Invité]

si je comprend bien tu veut supprimer sa

Code :

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

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 :

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

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 :

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

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]

si je comprend bien tu veut supprimer sa

Code :

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

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 :

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

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 :

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

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

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