文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在JS中从数组购物车中移除元素？

问如何在JS中从数组购物车中移除元素？
EN

Stack Overflow用户

提问于 2020-06-23 01:02:28

回答 3查看 51关注 0票数 0

我有这个数组

[
   0: {title: "Apple", price: 0.50, count: 1},
   1: {title: "Pizza", price: 5.50, count: 1},
   2: {title: "Hamburger", price: 4.50, count: 1},
   3: {title: "Coca Cola", price: 0.99, count: 1},
]

我用以下命令打印：

var dataAppunti = "";
    for (i = 0; i < appuntiFilter.length; i++){
    var rand = Math.floor(Math.random()*1000)+1;
        dataAppunti += "<div id='"+rand+"' class='row pb-3 mx-3 mt-3' style='border-bottom:1px solid #eeeeee;'>";
        dataAppunti += "<div id='fs-7' class='col-2 text-center font-weight-bold quant'>";
        dataAppunti += appuntiFilter[i].count+"x";
        dataAppunti += "</div>";
        dataAppunti += "<div id='fs-7' class='col-5'>";
        dataAppunti += appuntiFilter[i].title+" "+i;
        dataAppunti += "</div>";
        dataAppunti += "<div class='col-3 pricep font-weight-bold text-right' style='color:#27c727;' id='price-app'>";
        dataAppunti += parseFloat(appuntiFilter[i].price).toFixed(2).toLocaleString()+" €";
        dataAppunti += "</div>";
        dataAppunti += "<div onclick='deleteItem("+i+")' class='col-2'><img src='delete.png' style='max-height:20px;' class='img-fluid' /></div>";
        dataAppunti += "</div>";
    }

    $("#list-appunti").html(dataAppunti);

在deleteitem中：

function deleteItem(item){
   appuntiFilter.splice(item,1);
}

但是如果我删除第一个项目，最后一个项目的代码将不再是3而是2。当我删除一个元素时，我如何“缩放”和刷新位置的数量？

现在我遇到了这样的情况：

1x Apple 0.50欧元删除(位置0)

1x Pizza 5.50欧元删除(位置1)

1倍汉堡包4.50欧元删除(位置2)

1x可口可乐0.50欧元删除(位置3)

如果我移除Apple，它将继续存在：

1x Pizza 5.50欧元删除(位置1)

1倍汉堡包4.50欧元删除(位置2)

1x可口可乐0.50欧元删除(位置3)

arrays

cart

javascript

回答 3

Stack Overflow用户

发布于 2020-06-23 01:11:52

只需将该索引处的数据设置为未定义，如下所示...

function deleteItem(item){
   appuntiFilter[appuntiFilter.indexOf(item)]=undefined ;
}

票数 0

Stack Overflow用户

发布于 2020-06-23 01:13:35

如果你需要一个基于数组上的位置的排序，我会做类似下面的事情。

const container = document.querySelector('#list');
const containerChanged = document.querySelector('#list2');

const appuntiFilter = [{
    title: "Apple",
    price: 0.50,
    count: 1
  },
  {
    title: "Pizza",
    price: 5.50,
    count: 1
  },
  {
    title: "Hamburger",
    price: 4.50,
    count: 1
  },
  {
    title: "Coca Cola",
    price: 0.99,
    count: 1
  },
];

// Display list
appuntiFilter.forEach((el, idx) => {
  const div = document.createElement('div');
  div.textContent = `${el.title}, ${idx}`;
  container.appendChild(div);
})

// Delete first item.
appuntiFilter.splice(0,1);

// Show updated list.
appuntiFilter.forEach((el, idx) => {
  const div = document.createElement('div');
  div.textContent = `${el.title}, ${idx}`;
  containerChanged.appendChild(div);
})

<div id="list">

</div>
<hr/>
<div id="list2">

</div>

票数 0

Stack Overflow用户

发布于 2020-06-23 01:38:46

您可以在每次删除后重新创建列表。这是一个昂贵的操作，但你可以使用它，直到你的购物车中没有成千上万的商品。此外，您不需要使用jQuery来追加HTML.您可以使用DOMParser。我不确切地知道你是如何提供你想要删除的列表项的索引的，所以我只取了第一个索引。您可以将index = null行编辑为要删除的索引。我希望这能帮到你。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="delete_item">Delete</button>
    <ul id="list-appunti"></ul>
<script type="text/javascript">
    
    function renderList(appuntiFilter) {

        const list_appunti = document.getElementById('list-appunti');
        list_appunti.innerHTML = '';
        
        for (i = 0; i < appuntiFilter.length; i++){
            
            var rand = Math.floor(Math.random()*1000)+1;

            const list_dom_string = `
                <div id="${rand}" class='row pb-3 mx-3 mt-3' style='border-bottom:1px solid #eeeeee;'>
                    <div id='fs-7' class='col-2 text-center font-weight-bold quant'>
                        ${appuntiFilter[i].count}x
                    </div>
                    <div class='col-3 pricep font-weight-bold text-right' style='color:#27c727;' id='price-app'>
                        ${parseFloat(appuntiFilter[i].price).toFixed(2).toLocaleString()}€
                    </div>
                    <div onclick='deleteItem("+i+")' class='col-2'><img src='delete.png' style='max-height:20px;' class='img-fluid' />
                    </div>
                </div>

            `;

            const parser = new DOMParser();
            const dom = parser.parseFromString(list_dom_string, 'text/html');

            list_appunti.appendChild(dom.body.children[0]);
            
        }

    }

    function deleteItem(list_appunti, index){

        list_appunti.splice(index ? index : 0, 1);

    }

    window.onload = function () {
        
        const appuntiFilter = [
           {title: "Apple", price: 0.50, count: 1},
           {title: "Pizza", price: 5.50, count: 1},
           {title: "Hamburger", price: 4.50, count: 1},
           {title: "Coca Cola", price: 0.99, count: 1},
        ];

        renderList(appuntiFilter);

        const delete_button = document.getElementById('delete_item');

        delete_button.addEventListener('click', function (e) {

            const index = null; // supply index?

            deleteItem(appuntiFilter, index);
            renderList(appuntiFilter);

        }, true);
    }

</script>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62519695

复制

相似问题

问如何在JS中从数组购物车中移除元素？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JS中从数组购物车中移除元素？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JS中从数组购物车中移除元素？
EN