jQueryを使用してdivを削除します。

Question

divとjquery & PHPを使用しています。ここで私が今まで持っているものです：あなたが2つの灰色のボタンの一部をクリックすると

http://rabelatos.com/admin/prueba.php

新しい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> 

ありがとう！

Answer 1

なぜ、各選択ボックスの横に削除（X画像）ボタンを追加するだけですか？ ID（idname）で区別されるため、jQueryを使用して簡単に削除できます。あなたのために働くことを願っています。