jQuery remove specific field from dynamically generated fields

Question

Good afternoon, I'm hoping someone can help me here.

I'm quite new to jQuery so forgive me if this is a really obvious mistake I'm making.

I've got a form which allows me to add additional fields, I have it working and I've got it so they have unique ID tags but I'd like so when I click my removeFieldTeam it removes the specific field I have clicked on.

At the moment, it removes fields automatically from the bottom upwards.

JSFiddle

Any help is appreciated.

For remove button, each time you are adding the same ID. Hence all remove buttons have same IDs. Change them to classes and remove the closest div — Vinod Bhavnani
– Vinod Bhavnani, Commented Jan 3, 2018 at 12:21
unfortunately you don't have unique ID tags. Every time you add a new field you duplicate the IDs of the + and - buttons (which, btw, seem to be invisible in your demo, maybe check your CSS). Anyway, you really only need one "+" button, and you can either tie the "minus" buttons to the related textbox using data-attributes, or you could rely on the HTML structure and look for the textbox relative to the button by traversing the structure using jquery's "find" , "closest" etc. as required. — ADyson
– ADyson, Commented Jan 3, 2018 at 12:21
Anyway, apart from the tags problem, it's hard to say you've made a mistake as such - your current code just takes a totally different approach, by removing the textbox with the last generated ID. There's no attempt to try and identify the textbox related to the clicked button, so there's no mistake really, you just need to make the button do something else entirely. — ADyson
– ADyson, Commented Jan 3, 2018 at 12:25
" I thought it was deleting the div with a certain ID" yes it is, but it's always the last one, because you just use the current count. It doesn't attempt to identify the div which relates to the clicked button. Anyway, I suggested above how you might do it in order to achieve your goal. Vinod's answer takes one of those approaches. — ADyson
– ADyson, Commented Jan 3, 2018 at 12:28

Vinod Bhavnani · Accepted Answer · 2018-01-03 12:25:23Z

Here is the updated jquery code. I tested, it works:

$(document).ready(function () {

            // Set the counter value
            var countTeam = 1;

            $("#addFieldTeam").click(function () {
                event.preventDefault();
                // If there's more than 10 fields, throw an alert
                if (countTeam == 10) {
                    alert("Only 10 fields allowed");
                    return false;
                }
                // Declaring our new div and adding the form input.
                var newField = $(document.createElement('div'))
                    .attr({
                        id: "newFieldTeam" + countTeam,
                        class: "form-group"
                    });

                newField.after().html(
                    '<label class="form-label-bold" for="fieldTeam' + countTeam + '"' + '>' +
                    'Team '+countTeam+'</label>' +
                    '<input class="form-control fullish" id="fieldTeam' + countTeam +
                    '" type="text">' +
                    '<span><a class="minuslinkreport removeFieldTeam" href="#"> - </a></span>'
                );
                // adding the new field to the page within the #fieldGroupTeam div
                newField.appendTo('#fieldGroupTeam');

                // Increase the counter by 1
                countTeam++;
                console.log(countTeam);

            });
            // Once there's no more fields to delete, throw an error.
            $(document).on('click', ".removeFieldTeam", function () {
                event.preventDefault();
                if (countTeam < 2) {
                    alert("No fields to remove");
                    return false;
                }
                countTeam--
                console.log(countTeam);
                // Decrease the counter by 1 and remove the field.
                console.log($(this).closest('div'));
                 $(this).closest('div').remove();


            });
        });

For the remove button, I changed it from id to class, and onclick I am removing the closest div.

Please test and let me know if this works.

Here is the working fiddle

Thank you so much, that makes more sense, I was coming at it with the wrong approach.

Collectives™ on Stack Overflow

jQuery remove specific field from dynamically generated fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related