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

您可以使用.live() 或.delegate() 代替为创建的每个.remove 分配一个新的点击处理程序。

   // 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 就足够了。但也许这很重要？