Javascript 使用JQuery添加另一个字段并更新隐藏字段，仅以一种方式工作

JSIDLE链接：

我已经用两个例子创建了一个脚本，我发现这两个例子可以做两件不同的事情，一个是在用户请求时添加新字段，另一个是更新一个隐藏字段以显示创建了多少个字段。如果您添加字段，即隐藏字段从1变为2变为3，则此操作有效。。。当额外的字段出现时，但是当您单击“删除”时，它不会适当地缩小到2以下，而且也不总是这样

关于我错在哪里的任何建议：

HTML:

JQuery：

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

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                $('input#bacon').val(i);
                i++;
                return false;

        });

        $('#remScnt').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        $('input#bacon').val(i);
                        i--;
                }
                return false;
        });
});

$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#p'）.size（）+1；
$（'#addScnt'）.live（'click'，function（））{
$（'p>
'）。附录（scntDiv）；
$（'input#bacon'）.val（i）；
i++；
返回false；
});
$（'#remScnt'）.live（'click'，function（）{
如果（i>2）{
$（this.parents（'p'）.remove（）；
$（'input#bacon'）.val（i）；
我--；
}
返回false；
});
});

在更新值之前，必须增加/减少i，否则输入中仍会存储i的旧值。它只会在下一次调用函数时更新。当您在更新输入之前更新i时，输入将在该函数调用中得到更新，而不是在下一个函数调用中得到更新 因此在初始化i时也不需要+1

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size();

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            $('input#bacon').val(i);
            return false;

    });

    $('#remScnt').on('click', function() { 
            if( i > 1 ) {
                    $(this).parents('p').remove();
                    i--;
                    $('input#bacon').val(i);
            }
            return false;
    });

$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#u气味p'）.size（）；
$（'#addScnt'）。在（'单击'，函数（）上）{
$（'p>
'）。附录（scntDiv）；
i++；
$（'input#bacon'）.val（i）；
返回false；
});
$（'#remScnt'）。在（'click'，function（）{
如果（i>1）{
$（this.parents（'p'）.remove（）；
我--；
$（'input#bacon'）.val（i）；
}
返回false；
});

---

}))

在更新值之前必须增加/减少i，否则输入中仍会存储i的旧值。它只会在下一次调用函数时更新。当您在更新输入之前更新i时，输入将在该函数调用中得到更新，而不是在下一个函数调用中得到更新 因此在初始化i时也不需要+1

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size();

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            $('input#bacon').val(i);
            return false;

    });

    $('#remScnt').on('click', function() { 
            if( i > 1 ) {
                    $(this).parents('p').remove();
                    i--;
                    $('input#bacon').val(i);
            }
            return false;
    });

$（函数（）{
var scntDiv=$（'p#u scents'）；
变量i=$（'#p#u气味p'）.size（）；
$（'#addScnt'）。在（'单击'，函数（）上）{
$（'p>
'）。附录（scntDiv）；
i++；
$（'input#bacon'）.val（i）；
返回false；
});
$（'#remScnt'）。在（'click'，function（）{
如果（i>1）{
$（this.parents（'p'）.remove（）；
我--；
$（'input#bacon'）.val（i）；
}
返回false；
});

}))

首先，

live（）

在几年前已被弃用并从jQuery中删除，请将

on（）

与当前版本的jQuery一起使用。

size（）

也不应该使用，应该使用

length

，而

parents（）

不是一个好的选择。。。永远

其次，要多次创建具有相同ID的元素

您应该检查集合的长度，或者换句话说，实际检查页面上有多少元素，并在插入或删除新元素时使用该计数

尝试类似这样的方法，它使用更像jQuery的语法来创建元素，这样可以添加事件处理程序以直接删除

$（函数（）{
var scntDiv=$（'p#u scents'）；
$（'#addScnt'）。在（'click'，函数（e）上{
e、 预防默认值（）；
变量i=$（'.scents'）。长度+1，
p=$（“
”{
“类”：“气味”
}),
l=$（''）{
‘for’：‘p_scnts’+i
}),
f=$（''）{
键入：“文本”，
id:“p_scnt”+i，
名称：“p_scnt”+i，
尺寸：'20'，
占位符：“输入值”
}),
a=$（'

首先，

live（）

在几年前已被弃用并从jQuery中删除，请将

on（）

与当前版本的jQuery一起使用。

size（）

其次，要多次创建具有相同ID的元素

您应该检查集合的长度，或者换句话说，实际检查页面上有多少元素，并在插入或删除新元素时使用该计数

尝试类似这样的方法，它使用更像jQuery的语法来创建元素，这样可以添加事件处理程序以直接删除


$（函数（）{
var scntDiv=$（'p#u scents'）；
$（'#addScnt'）。在（'click'，函数（e）上{
e、 预防默认值（）；
变量i=$（'.scents'）。长度+1，
p=$（“
”{
“类”：“气味”
}),
l=$（''）{
‘for’：‘p_scnts’+i
}),
f=$（''）{
键入：“文本”，
id:“p_scnt”+i，
名称：“p_scnt”+i，
尺寸：'20'，
占位符：“输入值”
}),
a=$（'


我已经更新了您的一点。我：

移除了i>2
在输入中更新i的值之前，重新定义i的值（i--和i++）

删除了i的第一个定义中的“+1”
一些解释：
如果用户单击“添加输入”，但
$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size();

    $('#addScnt').on('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            $('input#bacon').val(i);
            return false;

    });

    $('#remScnt').on('click', function() { 
            if( i > 1 ) {
                    $(this).parents('p').remove();
                    i--;
                    $('input#bacon').val(i);
            }
            return false;
    });

$("form").append(/*new input*/); 
i++; 
$("input").val(i);

$("input").remove();
i--;
$("input").val(i);