Delete divs using jQuery - php

Question

I'm working with divs, jquery & PHP. Here is what I have up to now:
http://rabelatos.com/admin/prueba.php
If you click on some of the 2 gray buttons a new div will be added. But I would like to add a new icon to delete divs.
How can I implement this functionality?
This is the code that I have at this moment:
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>
Thanks !

Answer 1

Why don't you just add a delete (an X image) button next to each of the select boxes. As they are distinguished with their IDs (idname) , it can be easily deleted using jQuery. Hope that works for you.