JQuery Удалить родительский набор полей

Question

У меня есть форма, которая имеет несколько экземпляров одного и того же набора полей. Вы можете добавить дополнительные наборы полей, нажав "Добавить поле".

Страница начинается с 5 наборов полей. Если вы нажмете "Удалить", цвет фона изменится на красный (чтобы вы могли определить, какой набор полей будет удален).

Если вы добавите больше полей, эти наборы полей не будут реагировать на кнопку "Удалить", даже если они имеют тот же код, что и те, с которых начинается страница, и они добавляются в ту же форму.

Можете ли вы взглянуть на мой код и сообщить, почему добавленные поля не будут удалены, а те, которые начинаются на странице, удаляются?

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;
});

Answer 1

Связанные события не работают для динамически добавляемых / создаваемых элементов, поэтому вам необходимо делегировать событие самому первому родителю, которым не будут манипулировать динамически (используя jQuery или же JavaScript).

Из документации jQuery:

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

Также вы можете прочитать привязку событий к динамически создаваемым элементам.

---

Поэтому вы должны изменить свой код следующим образом:

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

Answer 2

Обновленная js fiddle находится здесь 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;
    });

});

Answer 3

Попробуй это $(this).parents('fieldset').remove()