如何从列表中删除项目？

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

我假设你拥有的每一件产品在包裹在里列表-标签。

在这种情况下，你可以将一个监听器，每个立标记，删除该元素从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 
    }); 
});