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的最后一个函数，如下面的

<MenuItem href='#' data-toggle='modal' data-target='#duplicateModal' data-source-duplicate={this.props.card.id}> duplicate </MenuItem>

Answer 2

使用class和.last（）的另一种方法是将按钮放入person包装器

要删除，请使用最近的按钮删除按钮所在的包装（因此每个人都有一个包装）

$(document).ready(function () {

    var x = 0; //initial count
    $(".add_field_button").on("click",function (e) {
        var $pWrapper = $('<div/>').addClass("person"); //Fields wrapper    
        e.preventDefault();
        x++;
        $pWrapper.append('<button type="button" class="remove_person">REMOVE</button>')
        .append('<div class="names">Name: <input type="text" name="names[]"/></div>')
        .append('<div class="ages">Age: <input type="text" name="ages[]"/></div>')
        .append('<div class="numbers">Number: <input type="text" name="numbers[]"/><br><br></div></div>')
        .appendTo("#input_fields_wrap");
    });

    $("#input_fields_wrap").on("click", ".remove_person", function (e) {
        e.preventDefault();
        $(this).closest(".person").remove();
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>People:</b><br>
<div class="input_fields_wrap" id="input_fields_wrap">
    <button type="button" class="add_field_button">ADD</button>
    <br>
</div>

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

2 个答案: