11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Jquery - Supprimer des divs crées dynamiquement

Bonjour à tous

J'ai une question concernant l'imbrication de code utilisant Jquery.

Le but de ma page est très simple, un lien permet d'ajouter des div dont le contenu ce trouve dans un fichier php externe.

Ce script fonctionne en partie, il permet d'ajouter des div en incrémentant à chaque fois une variable passée en get et modifie également l'id de chaque div ajoutée. Un petit compteur permet de connaitre le nombre de div crée.

Mon problème c'est que maintenant je souhaiterai mettre des liens afin de permettre à l'utilisateur de pouvoir supprimer une div de son choix.

Dans mon code ci-dessous, j'ai pris comme exemple la suppression de la div 3, mais à terme je souhaiterai évidemment que le lien soit dynamique et supprime la div précédente. Mais en testant ce code, rien ne se passe...

Voici mon index :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
   $('.onglet').click(function(){
      var nbr;
      nbr = $("input").val();
      nbr++;
      var url = "1.php?&num="+nbr;
      $("#contenu").append($("<div class='coucou"+nbr+"'>").load(url));
      $("#nbr_diplome").val(nbr);
      $("#contenu").append($("<a href='#' class='virer'>Virer la div 3</a>"));
      return false;
   });
   
   $('.virer').click(function(){
      $('.coucou3').remove();
      return false;
   });

});
</script>

<a href="#" class="onglet">Ajouter une div</a>

<div id="contenu"><!-- Insère le contenu ici --></div>
<div id="autre">Nombre de diplome <input type="text" id="nbr_diplome" value="0"></div>
</body>
</html>


Merci à tous ceux qui pourrons m'aider !
Cédric
Modifié par sweety808 (11 Mar 2011 - 18:00)
Bonjour,

C'est normal, il ne peut rien se passer puisque le gestionnaire d'événement n'est attaché qu'aux éléments présents au moment de l’exécution du script.

.virer n'existe pas au moment ou tu définis que celui ci doit être surveillé par ton gestionnaire d'évènement.

il te faut voir du coté de la fonction live :

$('.virer').live('click',function(){
 // Do something
});
Merci pour ta réponse.

J'ai testé autre chose qui fonctionne aussi.
A la fin de l'exécution du script d'ajout, je charge la fonction de suppression.


<script type="text/javascript">
$(document).ready(function(){
   $('.ajouter').click(function(){
      var nbr;
      nbr = $("#nbr_diplome").val();
      nbr++;
      var url = "1.php?&num="+nbr;
      $("#contenu").append($("<div id='essai' class='coucou"+nbr+"'>").load(url));
      suppr_diplome();
      $("#nbr_diplome").val(nbr);
      return false;
   });
   
function suppr_diplome(){
	 $('.virer').click(function(){
      $(this).parents("div:first").remove();
      return false;
   });
}

});
</script>


Du coup je peu appeler ma fonction dans mon fichier php en included.

Je peu désormais ajouter et supprimer mes divs...sauf la dernière Smiley biggrin .
Je ne sais pas pourquoi mais si je crée une ou plusieurs div, ensuite je peu toute les supprimer, sauf une ! Cela est assez embêtant...
Administrateur
Bonjour,

ton dernier script fait appel à des classes qui ne figurent pas dans le code HTML que tu avais posté ...
Sinon +1 pour .live() qui ajoute sur tout élément existant ou pas encore existant ton événement de suppression
Bonjour Felipe,

Oui effectivement le code a légèrement changé suite à mes différents tests !

Finalement je l'ai encore légèrement modifié afin qu'il supprime la div exacte dans lequel se situe le lien (et non plus relative), comme ça je peu imbriquer le lien d'en d'autre div sans souci.

Merci à vous deux (rs459 et Felipe), en ajoutant le .live(), tout semble parfaitement fonctionner.
Voici le code (au cas ou quelqu'un passerait par là avec le même problème) :

Fichier index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
   $('.ajouter').click(function(){
      var nbr;
      nbr = $("#nbr_diplome").val();
      nbr++;
      var url = "1.php?&num="+nbr;
      $("#contenu").append($("<div id='essai' class='coucou"+nbr+"'>").load(url));
      $("#nbr_diplome").val(nbr);
      suppr_diplome();
      return false;
   });

   
function suppr_diplome(){
	 $('.virer').live('click',function(){ 
	 var num_diplome;
	 num_diplome = ($(this).attr("href"));
      $(".coucou"+num_diplome).remove();
		$("#ecoute").val(num_diplome);
      return false;
   });
}

});
</script>

<a href="#" class="ajouter">Ajouter un diplome</a>

<div id="contenu"><!-- Insère le contenu ici --></div>
<div id="autre">Nombre de diplome <input type="text" id="nbr_diplome" value="0"><input type="text" id="ecoute"></div>
</body>
</html>


Fichier 1.php

<?php
$num_diplome = $_GET['num'];
?>
<div>Coucou c'est le diplome numéro <?php echo $num_diplome; ?></div>
<a href='<?php echo "$num_diplome"; ?>' class='virer'>Supprimer le diplome</a>
Sujet clos
Aller à