Add/remove input fields

Question

I have a silly bug that I'm overlooking. I can add items to the form by clicking the plus button but I am having trouble removing items that I have added. Here is my code:

    <script>
    $(document).ready(function(){
        var item_index=0;

        $("#add_additional_item").click(function(){

            item_index++;
            $("#Additional_item").attr("placeholder", "Additional Item " + item_index);
            $("#Additional_items_wrap p").attr("id", "remove_additional_item" + item_index);
            $("#number_of_fields").attr("value", item_index);

$(this).parent().before($("#Additional_items_wrap").clone().attr("id","Additional_items_wrap" + item_index));
            $("#Additional_items_wrap" + item_index).css("display","inline");

            $("#Additional_items_wrap" + item_index + " :input").each(function(){
                $(this).attr("name",$(this).attr("name") + item_index);
                $(this).attr("id",$(this).attr("id") + item_index);

            }); 

            $("#remove_additional_item" + item_index).click(function(){

                $(this).closest("div").remove();
                item_index--;
            });
        });
    });
</script>

the HTML:

            <label>Add Additional Item:</label> 
        <input type="hidden" id="number_of_fields" name="number_of_fields">                           

        <div id="Additional_items_wrap" class="hidden">

            <input type="text" name="Additional_item" id="Additional_item">
            <p class="icon-minus" id="remove_additional_item"></p>

        </div>

        <div id="input_add_item">

            <p id="add_additional_item" class="icon-plus" style="float:right; cursor:pointer"></p> 

        </div>

what are you trying to remove? the parent element of the paragraph tag? — stackErr
– stackErr, Commented Jan 20, 2014 at 19:55
Hi Yes i am trying to remove the div with ID additional_items_wrap — henk.io
– henk.io, Commented Jan 20, 2014 at 19:57
you cannot use index like this coz suppose you have 4 inputs and u remove the 2nd one.. and u do index-- so the count will be set to 2 and when you add index, there will be already an element with same index number.. — Harry Bomrah
– Harry Bomrah, Commented Jan 20, 2014 at 19:59

Community · Accepted Answer · 2017-05-23 11:49:42Z

1

You are trying to use jQuery with dynamic html, see here:

"The reason is that you cannot bind a handler to items that don't presently exist in the DOM" jquery click event not working for dynamic fields

Update: Here is an example of what I mean.

$(document).on("click", "#remove_additional_item" + item_index, function () {
  alert ("You just hit the jackpot!");
});

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Jan 20, 2014 at 21:29

T.Coutlakis

2,7801 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cam Over a year ago

Couldnt he create a static button, then using the clone method copy the button to each one so there is one that actually is present in the dom. Your just tricking the DOM?

T.Coutlakis Over a year ago

I don't think I'm tricking DOM, as I'm just using an element that already exists. I'm not familiar with the clone method, but he could also embed a call to Javascript in the html he creates.

Collectives™ on Stack Overflow

Add/remove input fields

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related