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

Version imprimable

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:

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>

Bonsoir

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

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:

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:

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

12/10/2011, 22h39
pascal64

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.:roll:

Merci à toi :ccool:et pour ton conseil abrupt ;)