JQuery刪除父節點

Question

我想添加一個應用程序，用戶可以根據需要添加儘可能多的字段集。當用戶點擊「添加」時，它會在package2中添加第二個字段集。如果用戶點擊相應的「刪除」，它將刪除相應的字段集。應用程序應始終至少有一個字段集，這意味着如果Web上只有一個字段集，則該字段集不能被刪除。我在這裏完成了一些代碼，有人可以幫我弄清楚它有什麼問題嗎？謝謝。 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/