Suppression d'un élément DOM en utilisant jQuery ne fonctionnant pas

Question

Je vais aller droit au but, j'utilise jQuery pour cloner un élément div, qui a une durée à l'intérieur de laquelle j'ai lié un événement click qui, lorsqu'il est déclenché, supprime le juste cloné section du DOM, maintenant la première section fonctionne bien, mais pour une raison quelconque, il ne supprimera pas les sections clonés une fois qu'ils sont créés, voici mon code,

HTML:

<div id='wrapper'> 
<div id="mail"> 
<div class="container" id="email"> 
    <label for="email_address">Email address: </label> 
    <div> 
     <input type="text" name="email_address" id="email_address" /> 
     <span class="remove"></span> 
    </div> 
</div> 
</div> 
<div class="container"> 
    <input type="button" id="button" name="button" value="click me" /> 
</div> 
</div> 

jQuery:

$(document).ready(function() { 

     $("span.remove").click(function(){ 
      $(this).parents("div.container").remove(); 
     }); 


     var count = 0; 

     $('#button').attr('disabled',''); 
     $('#button').click(function(){ 
      count++; 
      alert(count); 
      var test = $('#email.container').clone().attr('id', 'email_' + count).appendTo('#mail'); 
      test.children(':nth-child(2)').children(':first').attr('id', 'mail_' + count); 

      if(count == 3){ 
       $('#button').attr('disabled','disabled'); 
      } 

     }); 
}); 

Il me manque probablement quelque chose de petit, mais je n'arrive pas à trouver le problème.

Aussi, j'ai essayé de trouver une meilleure façon de cloner les sections, et une meilleure façon de traverser les éléments enfants quand je les renommer, il semble un peu en désordre pour le moment, des idées là-dessus?

Merci d'avance!

Answer 1

Le problème est le suivant: @pharalia stated.

Une solution est d'utiliser .live pour lier vos gestionnaires:

$("span.remove").live('click', function(){ 
     $(this).parents("div.container").remove(); 
    }); 

Answer 2

Les événements DOM ne sont pas copiés avec un élément et vous attachez l'événement en charge. Vous devez attacher l'événement à l'élément/aux enfants clonés lors de leur création.

Answer 3

vous pouvez utiliser il .clone(true). Il copiera également les événements liés à l'élément. en tant que paramètre, true, l'événement n'est pas copié.

demo