如何根据PHP中的复选框选择添加/删除Div

Question

Here's the code:

<div id="product">
<b>CHOOSE PRODUCT:<br></b>
<input type="checkbox" name="fruits" value="1">Orange<br>
<input type="checkbox" name="fruits" value="2">Grapes<br>
<input type="checkbox" name="fruits" value="3">Apple<br>
<input type="checkbox" name="fruits" value="4">Guava<br>
</div>
<div id="description">

</div>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').change(function(event) {
        var val=$(this).attr("value");
        $('#description').append('<div id='+val+'><input type="text" name="id[]" value="'+val+'"><input type="text" name="desc" value=""></div>');
    });
});
</script>

With this code, whenever user is selecting a checkbox, a div is getting created in the description div with id as the selected checkbox's value.

Now I need a functionality that, if the user unchecks any checked element, the corresponding div should also be removed.

Answer 1

<div id="product">
<b>CHOOSE PRODUCT:<br></b>
<input type="checkbox" name="fruits" value="1">Orange<br>
<input type="checkbox" name="fruits" value="2">Grapes<br>
<input type="checkbox" name="fruits" value="3">Apple<br>
<input type="checkbox" name="fruits" value="4">Guava<br>
</div>
<div id="description">

</div>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').change(function(event) {
        var val=$(this).attr("value");
        if ( $(this).is( ":checked" ) ) {
            $('#description').append('<div id='+val+'><input type="text" name="id[]" value="'+val+'"><input type="text" name="desc" value=""></div>');
        } else {
            $("#" + val).remove();
        }
    });
});
</script>