如何使用 onclick 功能从列表中删除？

Question

我正在尝试创建一个函数，该函数允许我从我正在处理的网站的购物车中删除一个项目。单击以从列表中删除该特定项目并立即显示它时，我想要最后一张图像。我不想刷新页面才能看到更新。我已经尝试了我能找到的所有东西，并尝试对我的 addtocart 进行逆向工程，但我就是无法得到它。任何帮助表示赞赏！

var x = JSON.parse(sessionStorage.getItem('shoppingList'));

document.write('<table align="center" >');
    document.write('<tr>');
    document.write('<th>' + " " + '</th>');
    document.write('<th>' + "Product" + '</th>');
    document.write('<th>' + "Price" + '</th>');
    document.write('<th>' + "Quantity" + '</th>');
    document.write('<th>' + "Remove" + '</th>');
    document.write('</tr>');
        for (var i = 0; i < x.length; i++){
            document.write('<tr>');
            for(var j = 0; j < 1; j++){
                document.write('<td align="center">');
                document.write('<img src="');           
                document.write(x[i].itemImageSrc);
                document.writeln('"style="height:100px; width:150px;"/>');  
                document.write('</td>');    
                document.writeln('<td align="center">' + x[i].itemDescription + '</td>');
                document.writeln('<td align="center">' + x[i].itemPrice + '</td>');
                document.write('<td align="center">' + "1" + '</td>');
                document.write('<td align="center">');
                document.write('<img id="can_'+i+'" onclick="removeItem(i)" src="');            
                document.write("./images/Icons/garbagecan.png");
                document.writeln('"style="height:25px; width:20px;"/>');    
                document.write('</td>');
            }
            document.write('</tr>');
        }
    document.write('</table>');


function removeItem(i) {
    var list = JSON.parse(sessionStorage.getItem("shoppingList"));
    list.pop(document.getElementById("can_'+i+'"));
    //x[i] = null;
}

Answer 1

TheChetan 是对的。我需要做的是添加

sessionStorage.setItem("shoppingList", JSON.stringify(list));
    window.location.href=window.location.href

到我的 removeItem 函数结束