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, Jan 20 '14 at 19:55
Hi Yes i am trying to remove the div with ID additional_items_wrap — henk.io, Jan 20 '14 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, Jan 20 '14 at 19:59

score 1 · Accepted Answer · edited May 23 '17 at 11:49

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 '17 at 11:49

Community

1
1

answered Jan 20 '14 at 21:29

T.Coutlakis

2,436
1
19
19

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? – Cam Jan 20 '14 at 21:35
1

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. – T.Coutlakis Jan 20 '14 at 21:44

Add/remove input fields

1 Answers1