使用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就足夠了。但也許這很重要？