jQuery .click() - Supprimer un élément [Résolu]

pascal64 · 12/10/2011, 18h08

Bonjour à tous,

Cela fait bientôt deux heures que je bloque sur un problème. J'utilise .remove et .append pour supprimer et ajouter des lignes dans mon div. Il m'est impossible de les effacer lorsuqe je click sur "Remove" et je ne comprends pas pourquoi. Pouvez-vous m'aider svp. Merci beaucoup.

Code html

Code :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){
 
var counter = 2;
 
$("#addButton").click(function () {
 
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
 
var newTextBoxDiv = $(document.createElement('li'))
.attr("id", 'itemFiltreActif' + counter).attr("class", 'itemFiltreActif');
 
//newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
// '<input type="text" name="textbox' + counter +
// '" id="textbox' + counter + '" value="" >');
 
 
newTextBoxDiv.append().html(counter +' <input value="Remove Button" id="removeButton" type="button" class="removeButton">');
 
newTextBoxDiv.appendTo("#contenuFiltreActif");
 
 
counter++;
});
 
$("input.removeButton").click(function () {
alert(counter);
if(counter==1){
alert("No more textbox to remove");
return false;
}
 
counter--;
 
$("#itemFiltreActif" + counter).remove();
 
});
 
});
</script>
 
</head>
<body>
 
<div class="contenuFiltre">
<ul id="contenuFiltreActif" class="contenuFiltreActif">
<li class="titreFiltreActif">Mes filtres</li>
<!-- <li id="itemFiltreActif1" class="itemFiltreActif">CDI <img src="../images/picot_suppirmer_filtre.png" width="10" height="10" /></li>
<li id="itemFiltreActif2" class="itemFiltreActif">Ile de france <input value="Remove Button" id="removeButton" type="button" class="removeButton"></li>-->
 
<input value="Add Button" id="addButton" type="button">
</ul>
</div>
</body>
</html>

danielhagnoul · 12/10/2011, 21h55

Bonsoir

Désolé d'être abrupt, mais vous avez encore beaucoup de choses à maîtriser.

Je vous conseille la lecture de l'API jQuery et de la FAQ jQuery.

Vous utiliser une version totalement obsolète de jQuery, voir : http://www.developpez.net/forums/d10...-4-disponible/

Code :

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

1
2
3
4
5
6
7
8
<div class="contenuFiltre">
	<ul id="contenuFiltreActif" class="contenuFiltreActif">
		<li class="titreFiltreActif">Mes filtres</li>
		<li>
			<input id="addButton" value="Add Button" type="button">
		</li>
	</ul>
</div>

Code :

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
var counter = 0;
 
$("#addButton").click(function(){
	//console.log(counter);
 
	if (counter < 10){
		counter++;
 
		$("<li/>", {
			"id": "itemFiltreActif" + counter,
			"class": "itemFiltreActif",
			"html": counter + ' <input value="Remove Button" id="removeButton" type="button" class="removeButton">'
		}).appendTo("#contenuFiltreActif");
 
	} else {
		alert("10 max");
	}
});
 
$("#contenuFiltreActif").delegate("input.removeButton", "click", function(){
	//console.log(counter, this);
 
	if (counter > 0){
		$(this).parent().remove();
 
		counter--;
	} else {
		alert("Erreur ! Ce cas ne doit jamais se produire, car il n'y a plus de bouton removeButton s'il n'y a plus d'input.")
	}
});

pascal64 · 12/10/2011, 22h39

Effectivement, comme je débute en jQuery, j'étais trop pressé et ne suis pas passé par les étapes de lecture et conception..j'ai ecris directement.

Merci à toi

et pour ton conseil abrupt

12/10/2011, 22h39	#3
pascal64 Invité de passage Inscription : mars 2010 Messages : 4 Détails du profil Informations forums : Inscription : mars 2010 Messages : 4 Points : 2 Points : 2	Effectivement, comme je débute en jQuery, j'étais trop pressé et ne suis pas passé par les étapes de lecture et conception..j'ai ecris directement. Merci à toi et pour ton conseil abrupt
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email