jQuery .click() - Supprimer un élément

**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.")
	}
});