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 documentation:

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

Также вы можете прочитать Event binding on dynamically created elements.

---

Таким образом, вы должны изменить свой код так:

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

Answer 2

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

Answer 3

Обновленный JS скрипку здесь 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; 
    }); 

});