Deleting an Item in an Array at a Specific Index
📣 Sponsor
In a previous article, I covered how to insert items into an array at a specific index, so now let’s look at how to delete items. Arrays, which are common data structures in Javascript, look a little like this:
let myArray = [ 'some', 'array', 'content' ];
They are a way to store data, which is commonly used throughout Javascript. If we want to delete items from an array, we can use the splice
method that all arrays have. Let’s look at how it works.
Deleting Items from an Array
If you just want to delete an item from an array, you only have to use splice
with two arguments. The first is the index you want to start from, and the second is how many items you want to delete. For example, if we want to delete 2 items, starting at index 0 from our array, we’d do the following:
let myArray = [ 'some', 'array', 'content' ];
myArray.splice(0, 2);
// Will return [ 'content' ]
console.log(myArray);
As you might’ve noticed, splice
actually alters the original array. So be careful when doing this, as a copy of the original will not be made! Here are some other examples to consider:
myArray.splice(3, 1); // Removes one item, at index 3
myArray.splice(0, 5); // Removes 5 items, at index 0 (i.e. from the start of the array);
Deleting Items from an Array by Value
In a similar vein, we can also delete an item from an array by value, but this is a little bit more tricky. We have to use both indexOf
and splice
for this to work:
- First, we get the index of the item we want to delete by value, using
indexOf
. - Then, we use that number to delete the array item.
Here’s an example. We want to delete the item ravioli from our array below. First, we get the index of that item, using arr1.indexOf('ravioli')
. This will return 2
, since that is the index of ravioli in our array. Then, we use that number to splice out one element at that index using splice(itemIndex, 1)
. Now, ravioli is removed from our array!
let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
let itemIndex = arr1.indexOf('ravioli');
// Returns [ 'potato', 'banana', 'carrot' ], since ravioli has an index of 2
arr1.splice(itemIndex, 1);
console.log(arr1);
Delete the last item from an Array
If all you want to do is delete the last item from an array in Javascript, use pop
. The pop()
method is an easy way to delete only the last element in an array. Just like splice
, it mutates your original array, so a copy of your original array will not be kept:
let arr1 = [ 'potato', 'banana', 'ravioli', 'carrot' ];
// Returns 'carrot'
console.log(arr1.pop());
// Returns [ 'potato', 'banana', 'ravioli' ]
console.log(arr1);
More Tips and Tricks for Javascript
- Javascript Arrays
- Waiting for the DOM to be ready in Javascript
- The Free Course for Javascript
- Types may be coming to Javascript
- Javascript Array Reduce Method
- Instagram Style Video Preload Static Effect
- Websockets Tutorial: Creating a real-time Websocket Server
- Detecting Device Orientation with Javascript
- Creating a NodeJS Push Notification System with Service Workers
- Javascript Dates and How they Work