Question

我正在尝试使用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将从数组中删除第一个Item的所有细节，

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

我是js的nob，还在学习。

Answer 1

尝试

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

Answer 2

嗯，有一些选项可以从数组中删除项目......

如果您的商品是第一个商品，则可以使用Array.prototype.shift()。

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

如果是 last 项目，您可以使用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>

Answer 3

您想使用splice，如下所示：

array.splice(index, 1);

根据点击的按钮设置index。

从数组数组中删除

3 个答案: