Question

我一直在研究以下代码，它动态生成HTML元素，最终用户可以添加和删除多达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);
    }
    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

注意：

自jQuery 1.8起，不推荐使用.size（）方法。请改用.length属性。

Answer 2

您需要进行一些更改

仅在添加新项目时增加i的值，因此请移动i++块内的if
删除项目会减少i

尝试

$(function () {
    var myDiv = $('#dispDiv');
    //set it to the size
    var i = $('#dispDiv p').size();

    $('#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);
            //increment only if new item is added
            i++;
        } else {
            alert("Max reached");
        }


        return false;
    });

    $('#remove-btn').click(function () {
        $('#dispDiv > p').last().remove();
        //decrement if removed
        if (i > 0) {
            i--;
        }
    });


});

演示：Fiddle

Answer 3

Hei只是在第二次单击事件处理函数中使用减量（Fiddle）：

$(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();
    i-- ;
    last.detach();
});


});

Answer 4

我认为我们不需要像这样管理i变量。每次点击add时都要检查长度：

$(function () {
    var myDiv = $('#dispDiv');
    $('#addScnt').click(function() {
        var i = $('#dispDiv p').length + 1; //Just check for the length every time you add
        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");
        }

        return false;
    });

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

此代码更简单，更易于维护，因为您无需手动执行i++和i--来计算当前项目的数量。此操作容易出错，并且当逻辑变得更复杂时可能导致错误的值。

注意： 的

.detach（）方法与.remove（）相同，但.detach（）除外保持所有jQuery数据与删除的元素相关联。这个当要删除的元素要重新插入时，方法很有用以后的DOM。

如果您不需要保留与已删除元素（包括事件处理程序）关联的所有jQuery数据，则应使用remove来释放所有数据以节省内存

var last = $('#dispDiv > p').last().remove();

DEMO

用jQuery / JS重置计数器？

4 个答案: