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.

Finds its index and call splice. Related: stackoverflow.com/questions/369602/… — megawac
– megawac, Commented Nov 12, 2013 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
– Ted Hopp, Commented Nov 12, 2013 at 17:51
All you want to do is to remove using yourArray.splice(index,1); — PSL
– PSL, Commented Nov 12, 2013 at 17:51

Vicky Gonsalves · Accepted Answer · 2013-11-12 17:52:22Z

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, 2013 at 17:52

Vicky Gonsalves

11.8k3 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jed Fox · Accepted Answer · 2017-06-30 13:54:02Z

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.

woz · Accepted Answer · 2013-11-12 17:51:35Z

1

You want to use splice, like this:

array.splice(index, 1);

Set index based on the button clicked.

answered Nov 12, 2013 at 17:51

woz

11.1k3 gold badges37 silver badges65 bronze badges

Collectives™ on Stack Overflow

delete from array of arrays

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related