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

});