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.
Code html
<!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>
