刪除div不工作在jquery

Question

我想刪除附加div。我有代碼在點擊後附加div; #add按鈕附加div。但我無法使用刪除按鈕將其刪除。我很困惑如何刪除它。

<script> 
     $(document).ready(function(){ 
     $('#add').click(function(){ 
      $('#item').append('<div class="form-group"><div class ="col-sm-4 col-md-4 col-lg-4"><input type="text" name="document" class="form-control" /></div> <div class="col-sm-4 col-md-4 col-lg-4" ><input type="file" name="image[]" class="form-control" /></div><div class="col-sm-4 col-md-4 col-lg-4" ><button class="del">Remove</button></div></div>'); 

     }); 

     $('#item').on("click",".del",function(){ 
     $(this).parent().remove(); 

     }); 


     }); 
     </script> 


    <div class="form-group"> 
          <label for="pass1" class="control-label col-sm-4 col-md-4 col-lg-4" ><span style="cursor:pointer" id="add">Add More</span></label> 

         </div> 

         <div id="item"> 
         <div class="form-group" > 

          <div class="col-sm-4 col-md-4 col-lg-4" > 

          <input type="text" name="document" class="form-control" /> 

          </div> 
          <div class="col-sm-4 col-md-4 col-lg-4" > 

          <input type="file" name="image[]" class="form-control" /> 

          </div> 
         </div> 
         </div> 

Answer 1

使用closest()

$('#item').on("click",".del",function(){ 
     $(this).closest('.form-group').remove(); 

    }); 

Demo