Question

我做了类似购物车的东西，您可以将物品拖到选定的部分，然后它们就会出现在那里。我现在正在尝试添加删除特定选定项目的选项，但我找不到合适的方法。有什么建议吗？

<section id="productCatalog">
    <div class="product">
        <h2 class="des">Product 1 </h2>
        <p class="description"> price: </p>
        <p class="price">400</p>
    </div>
    <div class="product">
        <h2 class="des">Product 2 </h2>
        <p class="description"> price: </p>
        <p class="price">200</p>
    </div>

<section id="shoppingCart">
    <h2 align="center">shopping cart</h2>
   </section>

脚本：

$(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 + "<button id='butt' onclick='one()'>delete item</button>" + "<br>") 
      }}); 

      function one()
      {

      }
});

Answer 1

<强> HTML

<section id="shoppingCart" class="ui-droppable">
    <h2 align="center">shopping cart</h2>
   <div>
        Product 1 
         price: 
        400
       </div>
    <button id="butt" onclick="one(this);">delete item</button><br></section>

<强> JS

function one(obj){
    var item = $(obj).prev().andSelf().remove();    
}

fiddle

删除购物车中的所选项目

1 个答案: