jQuery：從存儲在localstorage中的JSON數組中刪除對象？

Question

我正在創建一個基於jQuery的簡單購物車。

到目前爲止一切正常。

但是，我現在需要允許用戶刪除他們添加到購物籃中的商品。

我可以刪除該項目，它的工作原理，但它只會工作ONCE然後它開始行爲奇怪，這是沒有意義的！

爲了解釋這一點，我已經創造了這個縮小的FIDDLE：

https://jsfiddle.net/zmbpk1tr/6/

如果打開上面的鏈接，並點擊任何「綠色按鈕」，即元素應該被刪除，如果您之後嘗試刪除任何其他內容，您應該會看到該問題。

刪除的代碼是這樣的：

//////// 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); 


}); 

    }); 

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

可能有人請幫我解決這個問題？

在此先感謝。

Answer 1

您必須從每次點擊localStorage時獲取數組。

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

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

在你的小提琴，parsedCode是click事件的範圍之內，包含3種元素，和你保持這個數組過濾項目，所以導致了「奇怪」的行爲。