0

我正在尝试使用 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的菜鸟，还在学习。

4

3 回答 3

2

尝试

array.splice(index,1)array你的数组在哪里，是index你要删除的对象的索引

于 2013-11-12T17:52:22.400 回答
2

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

如果您的项目是您可以使用的第一个项目。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>

于 2013-11-12T18:01:40.590 回答
1

您想使用splice，如下所示：

array.splice(index, 1);

index根据单击的按钮设置。

于 2013-11-12T17:51:35.480 回答