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

我假设您将列表中的每个产品都包含在li-tag中。

在这种情况下，您可以将侦听器附加到每个li-tag，从而从DOM中删除该元素，如下所示：

$(document).ready(function() { // Makes sure the DOM is ready before you attach handlers.
  $("li").on("click", function() { // Will attach this event handler to every <LI> item.
    $(this).remove(); // Remove the <LI> that you clicked on
  });
});

如何从列表中删除项目？

1 个答案: