How to delete last object of an input array?

Question

I created a dynamic form which adds 3 new input fields if the user clicks a button. However, my delete button deletes the first added fields, which I don't want. How can I delete the last added input fields?

Below is my code for adding and deleting the fields.

$(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--;
        }
    })
});

Below is my code for the fields in the 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>

You need to have IDs be unique. To delete, use closest to remove the wrapper the button is in (so have a wrapper for each person) — mplungjan
– mplungjan, Commented Jun 5, 2018 at 8:33
@H77 Hmm the problem with that is that when 1 is deleted another could have the same ID? — Mia
– Mia, Commented Jun 5, 2018 at 8:35

Ajanth · Accepted Answer · 2018-06-05 08:35:49Z

Firstly, You're using duplicate id's. please use class names instead.

use the jquery's last function like below

$(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--;
        }
    })
});

mplungjan · Accepted Answer · 2018-06-05 08:42:19Z

An alternative to using class and .last() is to put the button into the person wrapper

To delete, use closest to remove the wrapper the button is in (so have a wrapper for each 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>

Collectives™ on Stack Overflow

How to delete last object of an input array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related