Discussion :

[bellouk]

Bonjour,

je rencontre un problème pour faire une manipulation assez basique, je pense que ce problème a déjà été traité de nombreuses fois, mais je n'arrive pas à retrouver de topics qui parlent de ça. (Je ne dois pas maîtriser la fonction recherche...)

je souhaite ajouter et supprimer un champ d'un formulaire :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<form id="formClient" method="POST" action="">
<table>
	<tr>
		<td>
		<label>Adresse</label>
		</td>
		<td>
		<select name="adresse">
		<option value="">Non définie</option>
		<option>Epinal</option>
		<option>Golbey</option>
		<option>Nancy</option>
		</select>
		</td>
		</tr>
 
		<tr class="propriete">
                <td><label>Propri&eacute;te </label>
                </td>
                <td><input type="text" /> 
                <a href="#" class="remProp">suppr</a>
                </td></tr>
 
		<tr id="traddProp">
		<td colspan=2 align="center">
		<a id="addProp" href="#">Ajouter une propriété</a>
		</td>
	</tr>
 
	<tr>
		<td colspan=2 align="center">
			<input type="submit" value="Ajouter" />
			<input type="submit" value="Retour" />
		</td>
	</tr>
</table>
</form>

je souhaite ajouter un champ propriete avant traddprop et pouvoir le supprimer avec le bouton suppr

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
	$("#addProp").click(function() {
		var ajout = '<tr class="propriete"><td><label>Propri&eacute;te </label></td><td><input type="text" /> <a href="#" class="remProp">suppr</a></td></tr>';
		$("#traddProp").before(ajout);
	});
});
 
$(function() {
	$(".remProp").click(function() {
		$(this).parent().parent().remove();
	});
});

L'ajout fonctionne, la suppression de propriété fonctionne pour l'élément propriete chargé initialement, mais les éléments propriete ajoutés ne se suppriment pas.

Est-ce que je n'utilise pas la bonne méthode? Merci d'avance pour votre aide

[NainPuissant]

Regarde du coté de l'événement live de jQuery, tu devrais y trouver ta réponse (:

[bellouk]

C'est exactement ce que je recherchais, d'ailleurs j'étais tombé sur un topic assez similaire il y a quelques semaines et je ne l'avais pas retrouvé.

Voici le code fonctionnel:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
	$("#addProp").("click",function() {
		var ajout = '<tr class="propriete"><td><label>Propri&eacute;te </label></td><td><input type="text" /> <a href="#" class="remProp">suppr</a></td></tr>';
		$("#traddProp").before(ajout);
	});
});
 
$(function() {
	$(".remProp").live("click",function() {
		$(this).parent().parent().remove();
	});
});

Merci pour le lien.