jQuery Remove Parent Fieldset

Question

I have a form that has multiple instances of the same field set. You can add more field sets by clicking "Add a Field."

The page starts with 5 field sets. If you click "Remove," the background color will change to red (so that you can tell which field set would be removed).

If you add more fields, those field sets will not respond to the "Remove" button even though they have the exact same code as the ones that the page starts out with, and they are added to the same form.

Can you please take a look at my code and let me know why the added fields will not remove whereas the ones that start out on the page remove?

https://jsfiddle.net/Lc510xmn/1/

// Adds a new field set to the form

$('[data-action="addField"]').click(function(){
        var fieldSet = '<fieldset><input type="text" name="field"><button type="button" data-action="removeField">Remove</button></fieldset>';
        $('form').append(fieldSet);
  return false;
});

// Changes the background to red instead of removing

$('[data-action="removeField"]').click(function(){
    $(this).parents('fieldset').css('background-color','red');
return false;
});

score 1 · Accepted Answer · edited May 23 '17 at 10:29

The bound events doesn't work for dynamically added/created elements, so you need to delegate the event to very first parent that will not be manipulate dynamically (using jQuery or JavaScript).

From jQuery documentation:

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

Also you can read Event binding on dynamically created elements.

So you should change your code like this:

// jQuery 1.7+
$('form').on('click', '[data-action="removeField"]', function() {
    $(this).parents('fieldset').css('background-color', 'red');
    return false;
});

Thank you so much for your excellent explanation!! I see why the dynamic elements were not working now. — Aaron Adrian, Sep 08 '16 at 19:57

score 1 · Answer 2 · answered Sep 08 '16 at 18:40

Updated js fiddle is here https://jsfiddle.net/Lc510xmn/2/

$(function(){

    $('[data-action="addField"]').click(function(){
            var fieldSet = '<fieldset><input type="text" name="field"><button type="button" data-action="removeField">Remove</button></fieldset>';
            $('form').append(fieldSet);
      return false;
    });

    $("#fields").on("click", '[data-action="removeField"]', function(event){
        $(this).parents('fieldset').css('background-color','red');
    return false;
    });

});

score 0 · Answer 3 · answered Sep 08 '16 at 18:35

0

Try this $(this).parents('fieldset').remove()

answered Sep 08 '16 at 18:35

Callam

11,409
2
34
32

jQuery Remove Parent Fieldset

3 Answers3