delete from array of arrays

Question

I am trying to remove certain items from an array with js

Here is my array

[
    {
        "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"
    }
]

on my screen I have 4 delete buttons called "deletebutton_0,deletebutton_1,deletebutton_2,deletebutton_4

so for example if i click deletebutton_0 the js will remove all details of the first Item from the array,

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

I'm a nob at js, still learning.

Look up splice() -- http://www.w3schools.com/jsref/jsref_splice.asp — Tim Withers, Nov 12 '13 at 17:48
Finds its index and call splice. Related: http://stackoverflow.com/questions/369602/delete-an-element-from-an-array?rq=1 — megawac, Nov 12 '13 at 17:49
Do you want the array to be shortened? Do you want to leave an empty (`null` or `undefined`) slot at the position of the deleted item? Or do you want to replace what's there with an empty object that has no details? — Ted Hopp, Nov 12 '13 at 17:51
All you want to do is to remove using `yourArray.splice(index,1);` — PSL, Nov 12 '13 at 17:51
As a beginner, you should be searching for answers to questions like these for yourself. You'll likely find that when you do, you'll learn 5 other things along the way. — Blue Skies, Nov 12 '13 at 17:52

score 2 · Answer 1 · answered Nov 12 '13 at 17:52

2

Try

array.splice(index,1) where array is your array and index is the object's index you want to remove

answered Nov 12 '13 at 17:52

Vicky Gonsalves

11,593
2
37
58

score 2 · Answer 2 · edited Jun 30 '17 at 13:54

Well, there are a few options for removing items from an array...

If your item is the first item you could use Array.prototype.shift().

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

If it's the last item you could use Array.prototype.pop().

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

You could use delete myArray[0]; to simply remove the 0 property but that wouldn't re-index the array.

Generally, you'll use Array.prototype.splice() to remove/insert items from/into an array from/at a particular location, i.e.:

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

Here's an example using 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>

Thx for reply, my problem is that when adding the click event I have only 1 deletebutton, when the service is called it creates the listing for all items in the array and the deletebuttons _0, _1, _2 as required, so to use the splice() method I need some code to identify which deletebutton has been clcked, and delete accordingly. Sorry if I wasnt clear. — user2912247, Nov 12 '13 at 18:11

score 1 · Answer 3 · answered Nov 12 '13 at 17:51

1

You want to use splice, like this:

array.splice(index, 1);

Set index based on the button clicked.

answered Nov 12 '13 at 17:51

woz

10,888
3
34
64

delete from array of arrays

3 Answers3