使用jQuery刪除div

我正在使用divs，jquery & PHP。下面是我到現在爲止：使用jQuery刪除div

如果你點擊一些2個灰色按鈕一個新的div將被添加的。但我想添加一個新的圖標來刪除div。

我該如何實現此功能？

這是我在這一刻代碼：

HTML & PHP：

<div class="page-content"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div align="col-sm-12" style="padding-bottom: 15px;"> 
       <center> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="addProduct"> 
         <i class="fa fa-plus-circle" aria-hidden="true"></i> <i class="fa fa-cutlery" aria-hidden="true"></i> 
        </button> 

        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="addDrink"> 
         <i class="fa fa-plus-circle" aria-hidden="true"></i> <i class="fa fa-coffee" aria-hidden="true"></i> 
        </button> 
       </center> 
      </div> 
     </div> 
     <div id="FoodContainer"> 
      <div class="form-group row" id="Food" style="display:block"> 
       <label class="col-sm-2 form-control-label"> 
        Food 
       </label> 
       <div class="col-sm-10"> 
        <select name="food[]" id="food[]" class="form-control"> 
         <option selected>Select</option> 
         <? 
         $s1=mysql_query("select * from productos where idCategoria='2'"); 
         while($f1=mysql_fetch_array($s1)){ 
          $idProduct=$f1["id"]; 
          $title=$f1["titulo"]; 

          echo "<p class=\"form-control-static\"><option value=\"$idProduct\">$title</option></p>"; 
         } 
         ?> 
        </select> 
       </div> 
      </div> 
     </div> 
     <div id="DrinkContainer"> 
      <div class="form-group row" id="Drink" style="display:block"> 
       <label class="col-sm-2 form-control-label">Drink</label> 
       <div class="col-sm-10"> 
        <select name="drink[]" id="drink[]" class="form-control"> 
         <option selected>Select</option> 
         <? 
         $s2=mysql_query("select * from productos where idCategoria='1'"); 
         while($f2=mysql_fetch_array($s2)){ 
          $idProduct1=$f2["id"]; 
          $title1=$f2["titulo"]; 

          echo "<option value=\"$idProduct1\">$title1</option>"; 
         } 
         ?> 
        </select> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div>

的jQuery：

<script type="text/javascript"> 
    jQuery(function($){ 
     var $food = $('#Food'), count = 1; 
     $('#addProduct').click(function(e){ 
      e.preventDefault(); 
      var idname = 'food' + (++count); 
      $food.parent().append($food.clone().attr({id: idname, name: idname})); 

     }); 

     var $drink = $('#Drink'), count = 1; 
     $('#addDrink').click(function(e){ 
      e.preventDefault(); 
      var idname = 'drink' + (++count); 
      $drink.parent().append($drink.clone().attr({id: idname, name: idname})); 
     }); 

    }); 
</script>

謝謝！

來源

2016-04-18 Ricardo DeLa Rosa Nieto

你可以附加一些這樣的元素，但不能用這種方式刪除元素，因爲jquery應該如何知道哪個div應該被刪除？你可以爲每個div設置刪除按鈕。 – Pedram