Question

eOk我使用此代码添加和删除输入字段，但输入字段的最大nubmer未正确计算，问题在于此行$（＆＃39; .remove_field＆＃39;）。click（function（e）。当我打电话给这一行时，所有的clase都是同名的，因此x--比一个减少的次数多，例如，如果我有4个输入，x将被计算为x-4。如何以简单的方式解决这个问题。

$('document').ready(function()
        {
           var max = 5;
           var x = 1;

            $('#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--;

            })

            });
        });

我试过像这样的事情

 $(#inp).on('click','.remove_field',function(e){})

但它对我不起作用???任何解决方案？

Answer 1

您在以下语句中使用div标记而不是end div标记：

$('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a><div><br/>');

应该是：

$('#inp').append('<div><input class = "new_input" type=text name="name[]" placeholder="Unesite podatak"/><a class="remove_field "href="#"> X</a></div><br/>');

Answer 2

我没有对它进行测试，但只是通过查看它，我可以看到您在}声明中遗漏了if (x < max)（在x++;之后的右括号）

Answer 3

每次点击#add时，您正在为所有现有输入添加其他事件处理程序。因此，您可以对类remove_field进行查询，但只询问最后一个。

$('.remove_field').last()

JS小提琴：http://jsfiddle.net/timctran/j2oftq6v/

<div id="add">Click to Add an Input</div>
<div id="inp"></div>

<script>
var max = 5;
var x = 0;

$('#add').click(function() { 
    if (x<5) {
        $('#inp').append(' \
            <div> \
                <input class="new_input" type=text name="name"/> \
                <a class="remove_field" href="#"> X </a> \
            </div> \
        ');
        x++;
        $('.remove_field').last().click( function(e) {
            $(this).parent('div').remove();
            x--;
        });
    }
});
</script>

Answer 4

试试这个：

<script>
$('document').ready(function()
        {
           var max = 5;
           var x = 1;

            $('#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--;

            });

            $('body').on('click','.remove_field',function(e){

                $('div#inp')[0].childNodes[max-1].remove();
max = max-1;
});
        });
</script>

<button class="remove_field">remove</button>
<button id="add">add</button>
<div id="inp">
</div>

但是我在每次点击删除时删除最后一个字段。

使用Jquery添加和删除输入字段后对其进行计数

4 个答案: