Удаление элементов только из корзины покупок на основе JQuery

Я пытаюсь создать корзину покупок JQuery только для упражнений и обучения. Но у меня проблема с кодированием опции удаления элементов из корзины покупок. Вот код:

<script src="assets/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
    var sum=0;
    var num=1;
    $(function() {          
        //Assign the producets a price date
        $( "#Product1" ).data( "price", 400 );
        $( "#Product2" ).data( "price", 500 );
        $( "#Product3" ).data( "price", 600 );

        //Adding the requested producted to the shopping cart
        $(".buy").on("click",function(evt) {
            var id=$(this).attr("id");
            $("#shopping_cart_items").append($(this).attr( "id" ) + " " +  "price: ");
            $("#shopping_cart_items").append($(this).data( "price" ) + "$" + "<img src='assets/x.png' width='10px' height='10px' class='cancel' id="
            +id + " + data-num= "+ num++ + " + >" + "<br>");

            //summing up the overall price
            sum=sum+$(this).data( "price" );
            $("#sum").text(sum+ "$");

            //Delete product from the shopping cart
            $(".cancel").on("click",function(evt) {
                //?
            }); 
        });
    });

</script>
<style>
#product img{
    width:300px;
    height:200px;   
}
#product{
    float: left;
    padding:5px;    
}
</style>
<h2>My shop</h2>

<div id="product"><img src="assets/Product1.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product1" />&nbsp;price:400$</div>
<div id="product"><img src="assets/Product2.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product2"/>&nbsp;price:500$</div>
<div id="product"><img src="assets/Product3.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product3" />&nbsp;price:600$</div><br />
<div id="shopping_cart" align="center">
<h1>Shopping cart</h1>
<hr />
    <div id="shopping_cart_items">
    </div>
 <hr />
 Sum:<div id="sum">0$</div>
</div>

Я дал каждому продукту уникальный номер, чтобы удалить его из корзины покупок, и я знаю, что мне, вероятно, потребуется использовать .remove(), но я много раз пробовал по-разному и не мог понять это правильно.