从数组中删除

delete from array of arrays

本文关键字：删除 数组      更新时间：2023-09-26

我正在尝试使用 js 从数组中删除某些项目

这是我的阵列

[
    {
        "Pizza": "Margarita",
        "Size": "Twelve Inch Stuffed Crust",
        "Base": "Deep Base",
        "Price": "6.50"
    },
    {
        "Pizza": "Hot Vegetarian",
        "Size": "Twelve Inch",
        "Base": "Deep Base",
        "Price": "6.00"
    },
    {
        "Pizza": "Vegetarian",
        "Size": "Ten Inch Stuffed Crust",
        "Base": "Deep Base",
        "Pricelabel": "Price",
        "Price": "6.50"
    },
    {
        "Pizza": "Hot Vegetarian",
        "Size": "Fourteen Inch Stuffed Crust",
        "Base": "Deep Base",
        "Pricelabel": "Price",
        "Price": "10.50"
    }
]

在我的屏幕上，我有4个名为"deletebutton_0，deletebutton_1，deletebutton_2，deletebutton_4的删除按钮

因此，例如，如果我单击deletebutton_0 JS将从数组中删除第一个项目的所有详细信息，

{"Pizza":"Margarita","Size":"Twelve Inch Stuffed Crust","Base":"Deep Base","Price":"6.50"}

我是js的贵族，仍在学习。

试试

array.splice(index,1)其中array是数组，index是要删除的对象索引

好吧，有几个选项可以从数组中删除项目......

如果您的项目是第一个项目，您可以使用Array.prototype.shift() .

myArray.shift(); // removes and returns the first item

如果这是最后一项，您可以使用Array.prototype.pop() .

myArray.pop(); // removes and returns the last item

您可以使用 delete myArray[0]; 简单地删除 0 属性，但这不会重新索引数组。

通常，您将使用Array.prototype.splice()从/在特定位置从数组中删除/插入到数组中，即：

myArray.splice(0, 1); // removes 1 item starting at index 0

下面是一个使用 splice 的示例：

var data = [{
  "Pizza": "Margarita",
  "Size": "Twelve Inch Stuffed Crust",
  "Base": "Deep Base",
  "Price": "6.50"
}, {
  "Pizza": "Hot Vegetarian",
  "Size": "Twelve Inch",
  "Base": "Deep Base",
  "Price": "6.00"
}, {
  "Pizza": "Vegetarian",
  "Size": "Ten Inch Stuffed Crust",
  "Base": "Deep Base",
  "Pricelabel": "Price",
  "Price": "6.50"
}, {
  "Pizza": "Hot Vegetarian",
  "Size": "Fourteen Inch Stuffed Crust",
  "Base": "Deep Base",
  "Pricelabel": "Price",
  "Price": "10.50"
}];
// create a click handler for your delete buttons
function handler(e) {
  // get array index
  var index = parseInt(this.id.split("_")[1], 10);
  // get the next sibling for reindexing
  var sibling = this.nextElementSibling;
  // remove the button from the DOM
  this.parentNode.removeChild(this);
  // remove item from Array
  var removedItems = data.splice(index, 1);
  // reindex remaining buttons
  do {
    sibling.textContent = sibling.id = "deletebutton_" + index;
  } while (index++, sibling = sibling.nextElementSibling);
  // log info
  console.log("remaining items: %o, removed: %o", data.length, removedItems[0]);
}
// get a reference to your buttons
var buttons = document.querySelectorAll("button");
// Add the event handler to your buttons
Array.prototype.forEach.call(buttons, b => b.addEventListener("click", handler));
<button type="button" id="deletebutton_0">deletebutton_0</button>
<button type="button" id="deletebutton_1">deletebutton_1</button>
<button type="button" id="deletebutton_2">deletebutton_2</button>
<button type="button" id="deletebutton_3">deletebutton_3</button>

你想使用拼接，像这样：

array.splice(index, 1);

根据单击的按钮设置index。

相关文章：