javascript - 用 jQuery/JS 重置计数器？

Question

我一直在研究以下代码，它动态生成 HTML 元素，最终用户可以在其中添加和删除最多 10 个可选输入字段:

JSfiddle

代码:

$(function () {
var myDiv = $('#dispDiv');
var i = $('#dispDiv p').size() + 1;

$('#addScnt').click(function() {
    if (i <= 10){
    $('<p><label for="dispDiv"><input type="text" id="c_name' + i + '" size="20" name="c_name_' + i + '" value="" placeholder="c_name" /></label<br></p>').appendTo(myDiv);
    }
    else
    {
        alert("Max reached");
    }


    i++;       
    return false;
});

$('#remove-btn').click(function(){
    var last = $('#dispDiv > p').last();
    last.detach();
});


});

问题是当用户添加 10 个输入然后删除它们时，他们无法重新添加输入，因为 10 个最大输入条件开始。我考虑过不同的解决方案，但没有一个产生结果我现在被困住了，你们有什么关于如何处理这个的建议吗？

Answer 1

你应该减少i删除输入时，也只是增加i如果i <= 10 :

$(function () {
    var myDiv = $('#dispDiv');
    var i = $('#dispDiv p').size() + 1;

    $('#addScnt').click(function () {
        if (i <= 10) {
            $('<p><label for="dispDiv"><input type="text" id="c_name' + i + '" size="20" name="c_name_' + i + '" value="" placeholder="c_name" /></label<br></p>').appendTo(myDiv);

            i++;
        } else {
            alert("Max reached");
        }

        return false;
    });

    $('#remove-btn').click(function () {
        var last = $('#dispDiv > p').last();
        last.detach();
        i--;
    });
});

我已经更新了 jsfiddle

注意:

The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.