title: Deleting items from JQuery based only shopping cart
body: <p>i am trying to build a JQuery shopping cart just for exercise and learning propuse.
  But i have a problem with coding the option to delete items from the shopping cart.
  Here is the code:</p>
  
  <pre><code>&lt;script src="assets/jquery-2.1.0.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      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" ) + "$" + "&lt;img src='assets/x.png' width='10px' height='10px' class='cancel' id="
              +id + " + data-num= "+ num++ + " + &gt;" + "&lt;br&gt;");
  
              //summing up the overall price
              sum=sum+$(this).data( "price" );
              $("#sum").text(sum+ "$");
  
              //Delete product from the shopping cart
              $(".cancel").on("click",function(evt) {
                  //?
              }); 
          });
      });
  
  &lt;/script&gt;
  &lt;style&gt;
  #product img{
      width:300px;
      height:200px;   
  }
  #product{
      float: left;
      padding:5px;    
  }
  &lt;/style&gt;
  &lt;h2&gt;My shop&lt;/h2&gt;
  
  &lt;div id="product"&gt;&lt;img src="assets/Product1.jpg" /&gt;&lt;br /&gt;&lt;input type="button" value="Buy" class="buy" id="Product1" /&gt;&amp;nbsp;price:400$&lt;/div&gt;
  &lt;div id="product"&gt;&lt;img src="assets/Product2.jpg" /&gt;&lt;br /&gt;&lt;input type="button" value="Buy" class="buy" id="Product2"/&gt;&amp;nbsp;price:500$&lt;/div&gt;
  &lt;div id="product"&gt;&lt;img src="assets/Product3.jpg" /&gt;&lt;br /&gt;&lt;input type="button" value="Buy" class="buy" id="Product3" /&gt;&amp;nbsp;price:600$&lt;/div&gt;&lt;br /&gt;
  &lt;div id="shopping_cart" align="center"&gt;
  &lt;h1&gt;Shopping cart&lt;/h1&gt;
  &lt;hr /&gt;
      &lt;div id="shopping_cart_items"&gt;
      &lt;/div&gt;
   &lt;hr /&gt;
   Sum:&lt;div id="sum"&gt;0$&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I gave each product a unique num in order to delete it from the shopping cart, and i know i will probally need to use <code>.remove()</code>, but i tried many times in different ways  and couldn't get it right.</p>