title: delete selected items in shoping cart
body: <p>i made something like a shoping cart which you can drag items to a selected section and they will appear there. im now trying to add the option to delete a specific selected item but i could not find a proper way to do so. any suggestions?</p>
  
  <pre><code>&lt;section id="productCatalog"&gt;
      &lt;div class="product"&gt;
          &lt;h2 class="des"&gt;Product 1 &lt;/h2&gt;
          &lt;p class="description"&gt; price: &lt;/p&gt;
          &lt;p class="price"&gt;400&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="product"&gt;
          &lt;h2 class="des"&gt;Product 2 &lt;/h2&gt;
          &lt;p class="description"&gt; price: &lt;/p&gt;
          &lt;p class="price"&gt;200&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;section id="shoppingCart"&gt;
      &lt;h2 align="center"&gt;shopping cart&lt;/h2&gt;
     &lt;/section&gt;
  </code></pre>
  
  <p>the script:</p>
  
  <pre><code>$(function(){
      $('.product').draggable({ 
          scroll: false, 
          containment: 'document' , 
          revert: true,
          start: function()
          {
              contents = $(this).text();
          }
       });
  
   $('#shoppingCart').droppable({ hoverClass: 'border', accept: '.product', drop: function()
        {
           $('#shoppingCart').append(contents + "&lt;button id='butt' onclick='one()'&gt;delete item&lt;/button&gt;" + "&lt;br&gt;") 
        }}); 
  
        function one()
        {
  
        }
  });
  </code></pre>