jQuery：从存储在localstorage中的JSON数组中删除对象？

我正在基于jQuery创建一个简单的购物车

到目前为止一切正常

但是，我现在需要允许用户删除他们添加到购物篮中的项目

我可以删除该项目，但它只会工作一次，然后它开始出现奇怪的行为，这是没有意义的

为了解释这一点，我制作了这个小型小提琴：

如果打开上面的链接并单击任何“绿色按钮”，该元素应被删除，如果在此之后尝试删除任何其他元素，则应看到问题

用于删除的代码如下所示：

//////// We try to delete the element here if its clicked on//////
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////

$(document).on('click','.cart-del',function(e){



    $('.cart-del').remove();

    var timeAttr = $(this).attr('data-time');

    alert(timeAttr);

    var result = parsedObject.filter(function(x){return x.timeStamp !== timeAttr; });



    var setLoc = JSON.stringify(result);
    localStorage.setItem('product', setLoc);


    var retrievedObject2 = localStorage.getItem('product');



    var parsedObject2 = JSON.parse(retrievedObject2);


            $.each(parsedObject2, function(pi,item){ 

                var products = '<div class="cart-del" id="'+item.id+'" data-price="'+item.price+'" data-details="'+item.details+'" data-time="'+item.timeStamp+'" id="1" data-price="20">'+
'<p>Delete "'+item.id+'"</p>'+
'</div>';



               $(".endDiv").before(products);


});

    });

///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

//如果单击该元素，我们将尝试删除该元素//////
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
$（文档）.on（'click'，'.cart del'，函数（e）{
$（'.cart del'）.remove（）；
var timeAttr=$（this.attr（'data-time'）；
警报（timeAttr）；
var result=parsedObject.filter（函数（x）{return x.timeStamp！==timeAttr；}）；
var setLoc=JSON.stringify（结果）；
localStorage.setItem（'product'，setLoc）；
var retrievedObject2=localStorage.getItem（'product'）；
var parsedObject2=JSON.parse（retrievedObject2）；
$.each（parsedObject2，函数（pi，项）{
var产品=“”+
“删除“+item.id+”
”+
'';
美元（“.endDiv”）。在（产品）之前；
});
});
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

有人能帮我解决这个问题吗

---

提前谢谢

每次单击时都必须从localStorage获取阵列

$(document).on('click','.cart-del',function(e){
    var retrievedObject = localStorage.getItem('product');
    var parsedObject = JSON.parse(retrievedObject);

    $('.cart-del').remove();
    .
    .
    .
}

---

在您的小提琴中，

parsedCode

不在click事件的范围内，并且包含3个元素，您不断从该数组中筛选项目，从而导致“奇怪”行为

每次单击时都必须从localStorage获取阵列

$(document).on('click','.cart-del',function(e){
    var retrievedObject = localStorage.getItem('product');
    var parsedObject = JSON.parse(retrievedObject);

    $('.cart-del').remove();
    .
    .
    .
}

---

在您的小提琴中，

parsedCode

不在click事件的范围内，并且包含3个元素，您不断从该数组中筛选项目，从而导致“奇怪”行为

将其放在on click（）侦听器的顶部是否太简单$（此选项）。删除（）；返回true；我之所以这么问，是因为我认为您发送AJAX是为了更新后端中的某些内容？@aaronbelchomber，谢谢您的回复。不过，我不会通过AJAX发送任何内容（目前还没有）。Daniel给出的答案非常有效。把它放在on click（）监听器的顶部是否太简单了$（此选项）。删除（）；返回true；我之所以这么问，是因为我认为您发送AJAX是为了更新后端中的某些内容？@aaronbelchomber，谢谢您的回复。不过，我不会通过AJAX发送任何内容（目前还没有）。丹尼尔给出的答案非常有效。这很好，但我仍然想知道为什么$（This）.remove（）；返回true；这不是你需要做的全部吗？没有任何访问权限，只需单击按钮，它就会消失。但这不会从本地存储中删除购物车项目。上面的代码只适用于从DOM中删除按钮；返回true；这不是你需要做的全部吗？没有任何访问权限，只需单击按钮，它就会消失。但这不会从本地存储中删除购物车项目。上面的代码只能用于从DOM中删除按钮。