Question

我正在尝试拖放购物车。在互联网上的某个网站的帮助下，我可以在购物车中添加商品，并计算总价。但我无法从购物车中删除所选商品。我是javascript和html5的新手，所以请帮帮我..

代码是：

    <script>
        function addEvent(element, event, delegate ) {
        if (typeof (window.event) != 'undefined' && element.attachEvent)
        element.attachEvent('on' + event, delegate);
        else 
        element.addEventListener(event, delegate, false);
        }

        addEvent(document, 'readystatechange', function() {
        if ( document.readyState !== "complete" ) 
        return true;

        var items = document.querySelectorAll("section.products ul li");
        var cart = document.querySelectorAll("#cart ul")[0];

            function updateCart(){
        var total = 0.0;
        var cart_items = document.querySelectorAll("#cart ul li")
        for (var i = 0; i < cart_items.length; i++) {
        var cart_item = cart_items[i];
        var quantity = cart_item.getAttribute('data-quantity');
        var price = cart_item.getAttribute('data-price');

        var sub_total = parseFloat(quantity * parseFloat(price));
        cart_item.querySelectorAll("span.sub-total")[0].innerHTML = " = " + sub_total.toFixed(2);

        total += sub_total;
        }

        document.querySelectorAll("#cart span.total")[0].innerHTML = total.toFixed(2);
        }

        function addCartItem(item, id) {
        var clone = item.cloneNode(true);
        clone.setAttribute('data-id', id);
        clone.setAttribute('data-quantity', 1);

        var btn=document.createElement('BUTTON');
    btn.className = 'remove-item';
    var t=document.createTextNode("X");
    btn.appendChild(t);
    cart.appendChild(btn);  
        clone.removeAttribute('id');

        fragment = document.createElement('span');
        fragment.setAttribute('class', 'sub-total');
        clone.appendChild(fragment);                    
        cart.appendChild(clone);

$('#product').on('click','.remove-item',function(){
        $(this).closest('li').remove();// remove the closest li item row
    });

        }

        function updateCartItem(item){
        var quantity = item.getAttribute('data-quantity');
        quantity = parseInt(quantity) + 1
        item.setAttribute('data-quantity', quantity);
        var span = item.querySelectorAll('span.quantity');
        span[0].innerHTML = ' x ' + quantity;
        }

        function onDrop(event){         
        if(event.preventDefault) event.preventDefault();
        if (event.stopPropagation) event.stopPropagation();
        else event.cancelBubble = true;

        var id = event.dataTransfer.getData("Text");
        var item = document.getElementById(id);         

        var exists = document.querySelectorAll("#cart ul li[data-id='" + id + "']");

        if(exists.length > 0){
        alert("Already present");
        } else {
        addCartItem(item, id);
        }

        updateCart();

        return false;
        }

        function onDragOver(event){
        if(event.preventDefault) event.preventDefault();
        if (event.stopPropagation) event.stopPropagation();
        else event.cancelBubble = true;
        return false;
        }
        addEvent(cart, 'drop', onDrop);
        addEvent(cart, 'dragover', onDragOver);

        function onDrag(event){
        event.dataTransfer.effectAllowed = "move";
        event.dataTransfer.dropEffect = "move";
        var target = event.target || event.srcElement;
        var success = event.dataTransfer.setData('Text', target.id);
        }


        for (var i = 0; i < items.length; i++) {
        var item = items[i];
        item.setAttribute("draggable", "true");
        addEvent(item, 'dragstart', onDrag);
      };
    });
    </script>

和

<section id="product">
<ul class="clear">
<li data-id="1">
<a href="#">
<img src="a.jpg" alt="">
<h3>item 1</h3>
<p>xyz</p>
</a> 
</li>
</ul>
</secton>

和css是：

<style>
ul, li{
list-style: none;
margin: 0px;
padding: 0px;
cursor: pointer;
}

section#cart ul{

height: 200px;

overflow: auto;
background-color: #cccccc;
}
</style>

Answer 1

为每个close button添加cart item

<input type="button" class="remove-item" value="X" />

尝试remove item-row，

$('#product').on('click','.remove-item',function(){
    $(this).closest('li').remove();// remove the closest li item row
});

Answer 2

然后尝试此操作以删除购物车中的物品

$（“。remove”）。click（function（e）{ pid = $（this）.siblings（“＃checkIDinput：hidden”）。attr（“ value”）;

或--------------------

$（“。remove”）。click（function（e）{ pid = $（this）.siblings（“ input：hidden”）。attr（“ value”）;

如何删除购物车中添加的项目？

2 个答案: