jQuery - Attacher un bouton de suppression au script de dépôt automatique?

Question

CODE RÉVISÉ À LA FIN

Je suis très nouveau pour jquery, et même si je l'aime, il y a beaucoup, je dois encore apprendre ... Le code ci-dessous ajoutera une nouvelle ligne si l'utilisateur clique dans l'une des cellules existantes dans une rangée. Cette partie fonctionne bien. J'essaie de comprendre comment avoir un bouton [-] à la fin de chaque ligne sur lequel un utilisateur peut cliquer pour enlever cette ligne au cas où ils font une erreur? Est-ce que c'est possible?

Voici le jquery

$(function(){ 
     $("#knotes > tbody > tr > td > input").bind('focus', function(){ 
      var row = $(this).closest("tr").get(0); 
      if(row.className.indexOf("clicked")==-1) 
      {  
        var rowCopy=$(row).clone(true); 
        $(row).closest("tbody").append(rowCopy); 
        row.className+="clicked"; 
        var newInput=$("input",rowCopy).get(0); 
        newInput.id="newId"; 
        $(newInput).bind('focus',attachAutoCompleteEmployeeValues); 
      } 
     }); 
}); 

Voici le balisage

<table width="100%" cellpadding="0" cellspacing="0" id="knotes"> 
<thead bgcolor="#f7f9c9"> 
    <td align="center"><label for="name">Name</label></td> 
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td> 
    <td>&nbsp;</td> 
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td> 

    <td>&nbsp;</td> 
    <td align="center"><label for="kbreak">Bk?</label></td> 
    <td>&nbsp;</td> 
    <td align="center"><label for="kshift">Shift</label></td> 
    <td>&nbsp;</td> 
</thead> 

<tr> 
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]" /></td> 

    <td align="center"><input type="text" name="klabor[kot][]" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kdt][]" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kbreak][]" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kshift][]" /></td> 

</tr> 
</table> 

VOICI LE CODE RÉVISÉ La version révisée jQuery

$(function(){ 
     $("#knotes > tbody > tr > td > input").bind('focus', function(){ 
      var row = $(this).closest("tr").get(0); 
      if(row.className.indexOf("clicked")==-1) 
      {  
        var rowCopy=$(row).clone(true); 
        $(row).closest("tbody").append(rowCopy); 
        row.className+="clicked"; 
        var newInput=$("input",rowCopy).get(0); 
        newInput.id="newId"; 
        $(newInput).bind('focus',attachAutoCompleteEmployeeValues); 
        $('minus').live(function(){$(this).closest('tr').remove();}); 
      } 
     }); 
}); 

Le balisage révisé

<table width="100%" cellpadding="0" cellspacing="0" id="knotes"> 
<thead bgcolor="#f7f9c9"> 
    <td align="center"><label for="name">Name</label></td> 
    <td align="center" nowrap="nowrap"><label for="kot">OT </label></td> 
    <td>&nbsp;</td> 
    <td align="center" nowrap="nowrap"><label for="kdt">DT </label></td> 

    <td>&nbsp;</td> 
    <td align="center"><label for="kbreak">Bk?</label></td> 
    <td>&nbsp;</td> 
    <td align="center"><label for="kshift">Shift</label></td> 
    <td>&nbsp;</td> 
</thead> 

<tr> 
    <td align="center" class="kac" id="test"><input type="text" id="kemployee" name="klabor[kemployee][]" /></td> 

    <td align="center"><input type="text" name="klabor[kot][]" value="" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kdt][]" value="" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kbreak][]" value="" /></td> 
    <td>&nbsp;</td> 
    <td align="center"><input type="text" name="klabor[kshift][]" value="" /></td><td class="minus"><img src="/images/minus.png" /></td> 

</tr> 
</table> 

Answer 1

Vous pouvez utiliser le jQuery live méthode.

$(".removeMe").live('click',function(){ 
    $(this).closest('tr').remove(); 
} 

maintenant à chaque fois que vous ajoutez ou un code html clone comme <a class='removeMe'>(-) Remove</a> jQuery définirez un événement onclick pour elle.

Edit:

$(function(){ 

     $('.minus').live(function(){$(this).closest('tr').remove();}); 

     $("#knotes > tbody > tr > td > input").bind('focus', function(){ 
      var row = $(this).closest("tr").get(0); 
      if(row.className.indexOf("clicked")==-1) 
      {  
        var rowCopy=$(row).clone(true); 
        $(row).closest("tbody").append(rowCopy); 
        row.className+="clicked"; 
        var newInput=$("input",rowCopy).get(0); 
        $(newInput).bind('focus',attachAutoCompleteEmployeeValues); 
      } 
     }); 
}); 

Answer 2

oui:

$('button').live(function(){$(this).closest('tr').remove();}); 

où 'bouton' est un sélecteur représentant votre bouton [-].

En outre, quelques modifications peuvent être apportées pour optimiser votre code (et le rendre plus multi-navigateur compatible):

if(row.className.indexOf("clicked")==-1) 
row.className+="clicked"; 
newInput.id="newId"; 

devrait devenir:

if (row.hasClass('clicked')) 
row.addClass('clicked'); 
newInput.attr('id','newId');