Javascript 从仅基于JQuery的购物车中删除项目

我正在尝试构建一个JQuery购物车，只是为了锻炼和学习。 但是我对从购物车中删除物品的选项编码有问题。 代码如下：

<script src="assets/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
    var sum=0;
    var num=1;
    $(function() {          
        //Assign the producets a price date
        $( "#Product1" ).data( "price", 400 );
        $( "#Product2" ).data( "price", 500 );
        $( "#Product3" ).data( "price", 600 );

        //Adding the requested producted to the shopping cart
        $(".buy").on("click",function(evt) {
            var id=$(this).attr("id");
            $("#shopping_cart_items").append($(this).attr( "id" ) + " " +  "price: ");
            $("#shopping_cart_items").append($(this).data( "price" ) + "$" + "<img src='assets/x.png' width='10px' height='10px' class='cancel' id="
            +id + " + data-num= "+ num++ + " + >" + "<br>");

            //summing up the overall price
            sum=sum+$(this).data( "price" );
            $("#sum").text(sum+ "$");

            //Delete product from the shopping cart
            $(".cancel").on("click",function(evt) {
                //?
            }); 
        });
    });

</script>
<style>
#product img{
    width:300px;
    height:200px;   
}
#product{
    float: left;
    padding:5px;    
}
</style>
<h2>My shop</h2>

<div id="product"><img src="assets/Product1.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product1" />&nbsp;price:400$</div>
<div id="product"><img src="assets/Product2.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product2"/>&nbsp;price:500$</div>
<div id="product"><img src="assets/Product3.jpg" /><br /><input type="button" value="Buy" class="buy" id="Product3" />&nbsp;price:600$</div><br />
<div id="shopping_cart" align="center">
<h1>Shopping cart</h1>
<hr />
    <div id="shopping_cart_items">
    </div>
 <hr />
 Sum:<div id="sum">0$</div>
</div>

var总和=0；
var-num=1；
$（函数（）{
//为产品指定一个价格日期
美元（“产品1”）。数据（“价格”，400）；
美元（“产品2”）。数据（“价格”，500）；
美元（“产品3”）。数据（“价格”，600）；
//将请求的产品添加到购物车
美元（“.buy”）。点击功能（evt）{
var id=$（this.attr（“id”）；
$（“#购物车\商品”）.append（$（this.attr（“id”）+“+”价格：）；
$（“#购物车项目”）。追加（$（this）.data（“price”）+“$”+“+”+”
”）；
//综合价格
总和=总和+$（本）。数据（“价格”）；
$（“#sum”）。文本（sum+“$”；
//从购物车中删除产品
$（“.cancel”）。在（“单击”时，函数（evt）{
//?
}); 
});
});
#产品img{
宽度：300px；
高度：200px；
}
#产品{
浮动：左；
填充物：5px；
}
我的商店

价格：400$

价格：500$

价格：600美元

购物车


总数：0$

---

我给了每个产品一个唯一的num，以便将其从购物车中删除，我知道我可能需要使用

.remove（）

，但我用不同的方法尝试了很多次，但都没有成功。

您必须将购物车产品包装在一个元素中，以便以后可以删除它。 此外，您的删除代码位于错误的位置，它必须位于购买

单击
功能>

请参阅我的演示：

var总和=0；
var-num=1；
$（函数（）{
//为产品指定一个价格日期
美元（“产品1”）。数据（“价格”，400）；
美元（“产品2”）。数据（“价格”，500）；
美元（“产品3”）。数据（“价格”，600）；
//将请求的产品添加到购物车
美元（“.buy”）。点击功能（evt）{
var id=$（this.attr（“id”）；
$("", {
html:$（this.attr（“id”）+“”+“price:”+$（this.data（“price”）+“$”+”
“，
“数据价格”：$（此）.data（“价格”）
}).附于（“#购物车#物品”）；
//综合价格
总和=总和+$（本）。数据（“价格”）；
$（“#sum”）。文本（sum+“$”；
});
//从购物车中删除产品
$（“#购物车\项目”）。在（“单击”，“取消”，功能（evt）{
$（this.parent（“span”）.remove（）；
sum=sum-$（此）.parent（“span”）.data（“价格”）；
$（“#sum”）。文本（sum+“$”；
});
});
试试这个：

var总和=0；
var-num=1；
//为产品指定一个价格日期
美元（“产品1”）。数据（“价格”，400）；
美元（“产品2”）。数据（“价格”，500）；
美元（“产品3”）。数据（“价格”，600）；
//将请求的产品添加到购物车
美元（“.buy”）。点击功能（evt）{
var id=$（this.attr（“id”），
项目=$（''）；
item.append（$（this.attr（“id”）+“+”价格：）；
item.append（$（本）.data（“价格”）+“$”+“+”
”）；
项目。附加到（$（“#购物车项目”）；
//综合价格
总和=总和+$（本）。数据（“价格”）；
$（“#sum”）。文本（sum+“$”；
});
//从购物车中删除产品
$（“#购物车”）。在（“单击”，“取消”，功能（evt）{
var$this=$（evt.currentTarget），
cartItem=$this.parent（），
newPrice=parseInt（$this.data（'price'））；
cartItem.remove（）；
总和=总和-新价格；
$（“#sum”）。文本（sum+“$”；
});

更改说明：

首先，我不知道为什么在jQuery闭包之外有sum和num变量。这使得它们在不需要时成为全局变量，这是一种不好的做法
“.cancel”事件处理程序嵌套在“.buy”处理程序中。它应该在同一水平上
您需要将每个购物车项目包装在一个元素中，以便于以后选择
“.cancel”处理程序应该是自解释的。它只是删除项目并更新总数
由于您只是将文本附加到div，因此在不更改现有代码的情况下很难实现这一点。只需将每个“产品”包装在一个容器div中，然后要删除该产品，请删除该容器div。另外，修复您的html，id必须是唯一的。对于每个产品，div id应该是唯一的，以便我删除它，对吗？谢谢你的帮助！嗯，你一开始真的不需要身份证。非常感谢你的帮助！非常感谢你的帮助！
var sum = 0;
var num = 1;
$(function () {
    //Assign the producets a price date
    $("#Product1").data("price", 400);
    $("#Product2").data("price", 500);
    $("#Product3").data("price", 600);

    //Adding the requested producted to the shopping cart
    $(".buy").on("click", function (evt) {
        var id = $(this).attr("id");
        $("<span/>", {
            html: $(this).attr("id") + " " + "price: " + $(this).data("price") + "$" + "<img src='http://placehold.it/20x20' width='20px' height='20px' class='cancel' id=" + id + " + data-num= " + num+++" + ><br />",
                "data-price": $(this).data("price")
        }).appendTo("#shopping_cart_items");


        //summing up the overall price
        sum = sum + $(this).data("price");
        $("#sum").text(sum + "$");
    });

    //Delete product from the shopping cart
    $("#shopping_cart_items").on("click", ".cancel", function (evt) {
        $(this).parent("span").remove();
        sum = sum - $(this).parent("span").data("price");
        $("#sum").text(sum + "$");
    });
});

var sum = 0;
var num = 1;
//Assign the producets a price date
$("#Product1").data("price", 400);
$("#Product2").data("price", 500);
$("#Product3").data("price", 600);

//Adding the requested producted to the shopping cart
$(".buy").on("click", function (evt) {
    var id = $(this).attr("id"),
        item = $('<div class="cart-item"></div>');
    item.append($(this).attr("id") + " " + "price: ");
    item.append($(this).data("price") + "$" + "<img src='assets/x.png' width='10px' height='10px' class='cancel' id=" + id + " + data-num= " + num++ + " data-price='" + $(this).data("price") + "' >" + "<br>");

    item.appendTo($("#shopping_cart_items"));

    //summing up the overall price
    sum = sum + $(this).data("price");
    $("#sum").text(sum + "$");
});

//Delete product from the shopping cart
$("#shopping_cart").on("click", ".cancel", function (evt) {
    var $this = $(evt.currentTarget),
        cartItem = $this.parent(),
        newPrice = parseInt($this.data('price'));

    cartItem.remove();
    sum = sum - newPrice;
    $("#sum").text(sum + "$");
});