删除不在jquery中工作的div

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