如何從 JS 中的數組購物車中刪除元素？
[英]How to remove a element from array cart in JS?
問題描述
我有這個數組
[
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);
在刪除項中：
function deleteItem(item){
appuntiFilter.splice(item,1);
}
但是，如果我刪除例如第一項，最后一項將不再具有代碼 3 而是 2。每當我刪除一個元素時，如何“縮放”和刷新 position 的數量？
現在我處於這種情況：
1x Apple 0.50€ 刪除（位置 0）
1x Pizza 5.50€ 刪除（位置 1）
1x 漢堡 4.50€ 刪除（位置 2）
1x Coca Cola 0.50€ 刪除（第 3 位）
如果我刪除 Apple 將保留：
1x Pizza 5.50€ 刪除（位置 1）
1x 漢堡 4.50€ 刪除（位置 2）
1x Coca Cola 0.50€ 刪除（第 3 位）
3 個解決方案
解決方案1
0
只需將該索引處的數據設置為未定義，如下所示...
function deleteItem(item){
appuntiFilter[appuntiFilter.indexOf(item)]=undefined ;
}
解決方案2
0 2020-06-22 17:13:34
如果您需要基於陣列上的 position 的訂單，我會執行以下操作。
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>
解決方案3
0 2020-06-22 17:38:46
您可以在每次刪除后重新創建列表。 這是一項昂貴的操作，但您可以使用它，直到您的購物車中沒有數千件商品。 另外，您不需要使用 jQuery 到 append 和 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>
JS：如果找到，如何從數組中刪除元素？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.