JQuery üst düğümü kaldır

Question

Kullanıcının istediği kadar çok alan ekleyebileceği bir uygulama yapmak istiyorum. Kullanıcı "ekle" yi tıkladığında, paket2 ile ikinci bir dosya grubunu ekler. Eğer kullanıcı ilgili "sil" e tıklarsa, ilgili alan kümesini silecektir.Uygulama, her zaman en az bir adet alan kümesine sahip olmalıdır, yani web üzerinde sadece bir tane alan kümesi varsa silinemez. Buradaki bazı kodları bitirdim, birisi bana neyin yanlış olduğunu anlamaya yardım edebilir mi? Teşekkür ederim. https://jsfiddle.net/cowling/2qfy6cct/

HTML kodu:

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

$(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

sorun, dinamik olarak oluşturulan unsurları olayları işlerken olay Yetkinin kullanılması gerektiğidir. Event Delegation

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

Çalışma Demo

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