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

Question

我编写了一个函数，用于在每次单击添加按钮时添加带有文本框和删除按钮的列表项。我还通过添加数字为每个新元素添加唯一的 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();
        });
    });
});​

谢谢，提前

//更新 所以我在 stackoverflow 上做了一些研究，发现了一篇关于执行重复 id 检查的帖子。新代码可以工作，但现在我必须弄清楚如何编写“找到最后一个 id 和 + 1，然后用这个新 id 创建新的 li。 这是我更新的代码：

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

您不应在每次单击 #add 时将 click() 处理程序重新分配给页面上的所有 .remove 元素。

因此，您需要向 .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 就足够了。但也许这很重要？