使用jQuery来添加和删除带有唯一ID的文本框

Question

我写了一个函数来添加带有文本框和删除按钮的listitem，每次添加按钮被点击。我还通过添加一个数字为每个新元素添加一个唯一的ID。问题发生在我尝试删除元素时，然后添加另一个元素，有时该数字被重复。例如：我添加4个李，并决定删除＃3。然后点击再次添加新的序列是1,2,4,3,4而不是1,2,4,5,6。我希望这是有道理的。
这里是我的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(); 
     }); 
    }); 
});​ 

感谢，提前

//更新 ，所以我在做计算器上的一些研究，发现一个帖子有关执行重复的ID的检查。新代码的工作，但现在我必须弄清楚如何写“找到最后一个ID和+ 1，然后用这个新的ID创建新丽 这里是我更新的代码：

$('#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

你不应该” T为重新分配click()处理页面上的所有.remove元素每次点击#add。

正因为如此，要添加多个相同的点击处理程序的.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.find('.remove').click(function() { 
      //count--; 
      $(this).parent('li').remove(); 
     }); 

    input.appendTo(newTxtBxLi); 

    count++; 
});​ 

至于分配一个新的单击处理程序创建的每个.remove另外，您也可以使用.live()或.delegate()代替。

// 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++; 
});​ 

还是.live()版本是这样的：

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

Answer 2

什么，而不是试图保持一个手动计数跟踪你，而不是做了一个统计有多少li元素的功能对你的页？即

$('#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(); 
     }); 
    }); 
}); 

我不知道究竟为什么你想要的顺序去1,2,4,5,6不过，因为仅仅拥有每一个都有一个唯一的ID就足够了。但也许这很重要？