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

Question

我在使用 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--;   
        });
    });
});

Answer 1

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

jQuery(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++;
        }
    });
    $('#inp').on('click', '.remove_field', function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="inp"></div>

问题:Demo