JQuery親ノードを削除する

Question

私は、ユーザーが必要な数のフィールドセットを追加できるアプリケーションを作成したいと考えています。ユーザーが「追加」をクリックすると、package2で2番目のファイルセットが追加されます。ユーザーが対応する「削除」をクリックすると、対応するフィールドセットが削除されます。アプリケーションには少なくとも1つのフィールドセットが必要です。つまり、Web上にフィールドセットが1つしかない場合は削除できません。私はここでいくつかのコードを完成させました。誰かがそれが間違っていることを理解するのを助けることができますか？ありがとうございました。 https://jsfiddle.net/cowling/2qfy6cct/

HTMLコード：

<form> 
    <div id="fieldwrapper"> 
     <fieldset class="col-md-9 col-md-offset-1 bottom20" id="addField"> 
     <div class="col-md-11"> 

      <label class="col-md-1 label-right left-0">package1*</label> 
      <div class=" col-md-11 input-div " id="tracking"> 
       <input type="text" class="col-md-11 input-div form-control required" > 
      </div> 
      <div id="errors" class="txt-left"></div> 


      <label class="col-md-1 label-right">comment</label> 
      <div class="col-md-11 input-div"> 
       <input class="form-control" type="text" >  
      </div> 

     </div> 

     <div class="col-md-1"> 
      <button type="button" class="btn btn-danger remove top25" >delete</button> 
     </div> 

     </fieldset> 
    </div> 




    <div class="form-group col-md-9 col-md-offset-1"> 
     <div class="col-md-6"> 
     <input type="button" class="btn btn-success btn-block" id="add" value="add" > 
     </div> 

     <div class="col-md-6"> 
     <button class="btn btn-primary btn-block" type="submit">finish</button> 
     </div> 
    </div> 

</form> 

JSコード：

$(document).ready(function(){ 


    // $('.remove').click(function(){ 
    //  $(this).parents("fieldset").remove(); 
    // }); 

    $("#add").click(function() {  
     $('.remove').click(function(){ 
     $(this).parents("fieldset").remove(); 
     });  
     var intId = $("#fieldwrapper fieldset").length + 1; 
     var html = '<fieldset class="col-md-9 col-md-offset-1 bottom20" id="addField" >'; 
     html += '<div class="col-md-11" >'; 
     html += '<label class="col-md-1 label-right left-0">package' + intId + '*</label>'; 
     html += '<div class=" col-md-11 input-div" id="tracking">'; 
     html += '<input type="text" class="col-md-11 input-div form-control required" >'; 
     html += '</div>'; 
     html += '<div id="errors" class="txt-left"></div>'; 
     html += '<label class="col-md-1 label-right">comment</label>'; 
     html += '<div class="col-md-11 input-div">'; 
     html += '<input class="form-control" type="text" >'; 
     html += '</div></div>'; 

     html += '<div class="col-md-1">'; 
     html += '<button type="button" class="btn btn-danger remove top25" >delete</button>'; 
     html += '</div>'; 
     html += '</fieldset>'; 


     $("#fieldwrapper").append(html); 
    }); 
}); 

Answer 1

問題は、動的に作成された要素のイベントを処理するときにイベントの委任を使用する必要があるということです。 Event Delegation

$(document).on("click", ".remove", function(){ 
    if ($("fieldset", "#fieldwrapper").length > 1) { 
    $(this).closest("fieldset").remove(); 
    } 
}); 

ワーキングデモ

https://jsfiddle.net/2qfy6cct/2/