en utilisant jQuery pour ajouter et supprimer la zone de texte avec des ID uniques

Question

J'ai écrit une fonction pour ajouter un listitem avec une zone de texte et un bouton de suppression, chaque fois que le bouton d'ajout a été cliqué. J'ajoute aussi un identifiant unique à chaque nouvel élément en ajoutant un numéro. le problème se produit lorsque j'essaie de supprimer un élément, puis d'en ajouter un autre, parfois ce numéro est en cours de duplication. ex: j'ajoute 4 li et décide d'enlever # 3. Puis cliquez sur Ajouter de nouveau à nouveau la nouvelle séquence est 1,2,4,3,4 au lieu de 1,2,4,5,6. J'espère que cela a du sens.
ici est mon javascript

var count = 2; 
$('#add').click(function() { 
    var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul'); 
    var input = $('<input type="text" id="newinput' + count + '" name="newinput' + count + '" /><input type="button" id="remove' + count + '" class="remove" value="">'); 

    $(input).appendTo(newTxtBxLi); 

    count++; 

    $('.remove').each(function() { 
     $(this).click(function() { 
      //count--; 
      $(this).parent('li').remove(); 
     }); 
    }); 
});​ 

Merci à l'avance

// mise à jour donc je faisais des recherches sur stackoverflow, et a trouvé un poste sur l'exécution d'un chèque de double d'identité. le nouveau code fonctionne, mais maintenant je dois comprendre comment écrire « trouver le dernier identifiant et + 1, puis créer une nouvelle li avec ce nouvel identifiant voici mon code mis à jour.

$('#add').click(function() { 
var count = $('ul > li').length + 1; 
     var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul'); 
     var input = $('<input type="text" id="newinput' + count + '" name="newinput' + count + '" /><input type="button" id="remove' + count + '" class="remove" value="">'); 

     $('ul > li[id]').each(function(){ 
      var ids = $('[id='+this.id+']'); 
      if(ids.length>1 && ids[0]==this){ 
       //console.warn('Multiple IDs #'+this.id); 
       //find the last id and + 1, then add new listitem  

       }else{ 
       $(inputAcc).appendTo(newTxtBxLi); 
       accomplishCount++; 
       } 

      }); 

     $('.remove').each(function() { 
      $(this).click(function() { 
       count--; 
       $(this).parent('li').remove(); 
      }); 
     }); 
    });​ 

Answer 1

Vous shouldn » t être réattribuant le gestionnaire click() à tous les .remove éléments sur la page chaque fois que vous cliquez sur #add.

en raison de cela, vous ajoutez plusieurs gestionnaires de clic identiques aux .remove éléments.

il suffit de l'assigner à le nouveau que vous avez créé

var count = 2; 
$('#add').click(function() { 
    var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul'); 

    var input = $('<input type="text" id="newinput' + count + '" name="newinput' + count + '" /><input type="button" id="remove' + count + '" class="remove" value="">'); 

    input.find('.remove').click(function() { 
      //count--; 
      $(this).parent('li').remove(); 
     }); 

    input.appendTo(newTxtBxLi); 

    count++; 
});​ 

Comme alternative à l'attribution d'un nouveau gestionnaire de clic pour chaque .remove qui est créé, vous pouvez utiliser .live() ou .delegate() à la place.

// Call delegate on the UL when the page loads. 
    // Probably a good idea to have an ID on the UL 
$('ul').delegate('.remove','click',function() { 
      //count--; 
      $(this).parent('li').remove(); 
     }); 

var count = 2; 
$('#add').click(function() { 
    var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul'); 

    var input = $('<input type="text" id="newinput' + count + '" name="newinput' + count + '" /><input type="button" id="remove' + count + '" class="remove" value="">'); 

    input.appendTo(newTxtBxLi); 

    count++; 
});​ 

Ou la version .live() ressemblerait à ceci:

$('ul > li > .remove').live('click',function() { 
      //count--; 
      $(this).parent('li').remove(); 
     }); 

Answer 2

Qu'en est-il au lieu d'essayer de garder une trace d'un décompte manuel vous plutôt fait un compte en fonction de combien de li éléments sont sur votre page? à savoir

$('#add').click(function(){ 
    count = $('li').length; 
    var newTxtBxLi = $('<li></li>').attr('id', 'newli' + count).appendTo('ul'); 
    var input = $('<input type="text" id="newinput'+ count +'" name="newinput'+ count +'" /><input type="button" id="remove'+ count +'" class="remove" value="">'); 

    $(input).appendTo(newTxtBxLi); 

    $('.remove').each(function(){ 
     $(this).click(function(){ 
      $(this).parent('li').remove(); 
     }); 
    }); 
}); 

Je ne sais pas exactement pourquoi vous vouliez la séquence d'aller 1,2,4,5,6 si, comme tout simplement avoir chacun ont un identifiant unique devrait suffire. Mais peut-être que c'était important?