closest（）。remove（）は一度動作してから動作を停止します

Question

私のコードは新しいフィールドを動的に作成しますが、最初に作成したフィールドのみを削除できます。 remove関数を呼び出す他のすべての試みは失敗するように見えますが、私はなぜそれがわからないのですか？

フィドル：https://jsfiddle.net/n2fole00/25xfht1y/

HTML

<div class="acal-position-container"> 
    <div class="acal-card-container"> 
     <input type="hidden" name="id[]" value=""> 
     <div style="background-color:#ADD8E6;padding:15px;margin-top:15px;"> 
      <div style="text-align:right;margin-bottom:10px;"> 
       <a href="#" class="remove-position-card"><strong>Remove position </strong></a> 
      </div> 
      <div class="form-group"> 
       <label for="title[]">Title</label> 
       <input type="text" name="title[]" value="" class="form-control" required> 
      </div> 
     </div> 
    </div> 
</div> 

<input type="button" id="add_position_card" style="margin-top:5px;" value="Add position"> 

jQueryの

$('.remove-position-card').click(function() { 
    $(this).closest('.acal-card-container').remove(); 
    //console.log('called'); 
}); 

$('#add_position_card').click(function() { 
    $('.acal-position-container').append('<div class="acal-card-container">' + 
    ' <input type="hidden" name="id[]" value="">' + 
    ' <div style="background-color:#ADD8E6;padding:15px;margin-top:15px;">' + 
    ' <div style="text-align:right;margin-bottom:10px;">' + 
    '  <a href="#" class="remove-position-card"><strong>Remove position </strong></a>' + 
    ' </div>' + 
    ' <div class="form-group">' + 
    '  <label for="title[]">Title</label>' + 
    '  <input type="text" name="title[]" value="" class="form-control" required>' + 
    ' </div>' + 
    ' </div>' + 
    '</div>'); 
}); 

感謝。

Answer 1

あなたがdymamically HTMLを生成しているため、イベント委任を使用しています。あなたが動的にDOM要素を追加している場合あなたが持っているので

代わり

$('.remove-position-card').click(function() { 

の使用

$('.acal-position-container').on('click','.remove-position-card' , function() { 

Fiddle

Docs

Answer 2

動的に作成される要素には、イベント委任を使用する必要があります。

$('.acal-position-container').on('click','.remove-position-card' ,function() { 
    $(this).closest('.acal-card-container').remove(); 
    //console.log('called'); 
}); 

Working Fiddle

Reference