Javascript 使用jquery添加和删除输入字段

使用jQuery添加输入字段时出现问题

我将限制设置为5个输入字段。但是如果我试图删除输入字段，我的限制就不起作用了。 当我使用x--时，我的var x不是适当的减量，例如，如果我有5个输入字段，当我单击删除一个输入时，var x是-4，而不是-1

有人能帮我解决这个问题吗。我的代码是：

$('document').ready(function() {
    var max = 5;
    var x = 0;
    $('#add').click(function(e) {  
        if(x < max) {
            $('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');
            x++;
        }
        $('.remove_field').click( function(e) {   
            e.preventDefault();
            $(this).parent('div').remove();
            x--;   
        });
    });
});

$（'document'）.ready（函数（）{
var max=5；
var x=0；
$（'#添加'）。单击（函数（e）{
如果（x'）；
x++；
}
$（'.remove_字段'）。单击（函数（e）{
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；
x--；
});
});
});

问题是您正在添加处理程序中添加移除处理程序，而不是使用。因此，前面添加的remove元素将获得多个remove处理程序，从而导致x递减多次

jQuery（函数（$）{
var max=5；
var x=0；
$（'#添加'）。单击（函数（e）{
如果（x'）；
x++；
}
});
$（“#inp”）。在（'click'，'上。删除函数（e）的_字段{
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；
x--；
})
});

添加
下面是一个小例子，
请参阅此链接

http://jsfiddle.net/vh3Js/

希望这对你有帮助

HTML:

<form id="myForm">
    <div style="margin-bottom:4px;" class="clonedInput">
        <input type="button" class="btnDel" value="Delete" disabled="disabled" />
        <input type="text" name="input1" />
    </div>

    <div>
        <input type="button" id="btnAdd" value="add another name" />
    </div>
</form>



JS:

$（文档）.ready（函数（）{
var输入=1；
$（'#btnAdd'）。单击（函数（）{
$（'.btnDel:disabled'）.removeAttr（'disabled'）；
var c=$（'.clonedInput:first'）.clone（true）；
c、 子项（':text'）.attr（'name'，'input'+（++inputs））；
$（'.clonedInput:last'）。在（c）之后；
});
$（'.btnDel'）。单击（函数（）{
如果（确认（'继续删除？'））{
--投入；
$（this）.closest（'.clonedInput'）.remove（）；
$（'.btnDel'）.attr（'disabled'，（$（'.clonedInput'）.length<2））；
}
});
});
这是
$（'.remove_field'）。单击（函数（e）{..
为您工作？您可以为此创建一个小提琴吗？5-1是4，那么problem@Roshanjha@ArunPJohny好的，我知道了。事实上，从问题中不清楚我知道了错误Undefined不适用于此行$（'inp'）。在（'click'，'remove_field'，function（e）{@VladimirŠtus jQuery version usedscholud我使用$（'.remove_field'）@VladimirŠtus你想在哪里使用
$（'.remove_field'）
@VladimirŠtus你能用jsfiddle或代码片段重现这个问题吗
$(document).ready(function() {

    var inputs = 1; 

    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name','input'+ (++inputs) );
        $('.clonedInput:last').after(c);
    });

    $('.btnDel').click(function() {
        if (confirm('continue delete?')) {
            --inputs;
            $(this).closest('.clonedInput').remove();
            $('.btnDel').attr('disabled',($('.clonedInput').length  < 2));
        }
    });


});