Remove Dynamically Added Fields with Javascript

Question

I have a form where I am cloning the initial input fields as a template to allow the user to add as many options as they need to. Adding new fields works fine, but when attempting to remove them, the first one works as expected but all generated fields cannot be removed.

My knowledge of JS is very poor but I would assume that setting it to remove the parent should be the correct operation.

<script type="text/javascript">
$(function()
{
    var template = $('#inventoryItems .inventory:first').clone(),
        inventoryCount = 1;

    var addInventory = function()
    {
        inventoryCount++;
        var inventory = template.clone().find(':input').each(function()
        {
            var newId = this.id.substring(0, this.id.length-1) + inventoryCount;
            $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
            this.name = this.id = newId; // update id and name (assume the same)
        }).end() // back to .attendee
        .attr('id', 'inv' + inventoryCount) // update attendee id
        .appendTo('#inventoryItems > fieldset'); // add to fieldset
    };

    $('.btnAddInventory').click(addInventory); // attach event
});

$(function()
{
    var removeInventory = function()
    {
        $(this).parent().remove();
    };

    $('.btnRemoveInventory').click(removeInventory); // attach event
});
</script>

HTML:

                <div id="inventoryItems" class="inventoryItems" style="margin:0; padding:0;">

                    <fieldset style="width:62%; float:left; margin-left: 19%;">

                        <label>Inventory</label>
                        <div id="inv1" class="inventory">
                            <select name="invItem1" style="width:92%;">
                                <?php
                                    $invItem_values = array("id", "name");
                                    display_options_list($dp_conn, $invItem_values, "inventory", "id");
                                ?>
                            </select>

                            <input class="btnRemoveInventory" type="button" style="background: url(images/icn_trash.png) no-repeat; cursor:pointer; border: none;">
                        </div>

                    </fieldset><div class="clear"></div>

                    <!-- Add Inventory Button -->
                    <div style="width:62%; margin:0; padding:0; float: right; margin-right: 19%">
                        <input class="btnAddInventory" type="button" value="Add Item" style="float: right;">
                    </div><div class="clear"></div>

                </div>

Rory McCrossan · Accepted Answer · 2013-09-09 11:03:16Z

1

Attaching events via click() (or any other shortcut event handler) only works with elements which are available on load of the page. Instead, because you are appending elements dynamically, you need to use a delegated event handler. Change this:

$('.btnRemoveInventory').click(removeInventory)

To this:

$('#inventoryItems').on('click', '.btnRemoveInventory', removeInventory)

This is attaching the event to the nearest static element, #inventoryItems, and then filters the events raised to see if the target matches .btnRemoveInventory.

answered Sep 9, 2013 at 11:03

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

user470760 Over a year ago

Perfect, thank you :) I will accept the answer as soon as it lets me.

Collectives™ on Stack Overflow

Remove Dynamically Added Fields with Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related