javascript - 如何删除输入数组的最后一个对象？

Question

我创建了一个动态表单，如果用户单击按钮，它会添加 3 个新的输入字段。但是，我的删除按钮删除了第一个添加的字段，这是我不想要的。如何删除最后添加的输入字段？

下面是我添加和删除字段的代码。

$(document).ready(function () {
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 0; //initial count
    $(add_button).click(function (e) {
        e.preventDefault();
        x++;
        $(wrapper).append('<div id="names">Name: <input type="text" name="names[]"/></div>');
        $(wrapper).append('<div id="ages">Age: <input type="text" name="ages[]"/></div>');
        $(wrapper).append('<div id="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>');
    });

    $(wrapper).on("click", ".remove_person", function (e) {
        e.preventDefault();
        if(x > 0) {
            $("#names").remove();
            $("#ages").remove();
            $("#numbers").remove();
            x--;
        }
    })
});

下面是我的 HTML 字段代码。

<b>People:</b><br>
<div class="input_fields_wrap" id="input_fields_wrap">
    <button class="add_field_button">ADD</button>
    <button id="remove_person" class="remove_person">REMOVE</button>
    <br>
</div>

Answer 1

首先，您使用了重复的 ID。请改用类名。

使用 jquery 的最后一个函数，如下所示

$(document).ready(function () {
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 0; //initial count
    $(add_button).click(function (e) {
        e.preventDefault();
        x++;
        $(wrapper).append('<div class="names">Name: <input type="text" name="names[]"/></div>');
        $(wrapper).append('<div class="ages">Age: <input type="text" name="ages[]"/></div>');
        $(wrapper).append('<div class="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>');
    });

    $(wrapper).on("click", ".remove_person", function (e) {
        e.preventDefault();
        if(x > 0) {
            $(".names").last().remove();
            $(".ages").last().remove();
            $(".numbers").last().remove();
            x--;
        }
    })
});