How To Remove Elements From Javascript Array – Simple Examples

Welcome to a quick tutorial on how to remove elements from a Javascript array. Need to remove some elements from an array? It may seem like a simple task at first, but things can get a little bit funky… Here is a quick list of examples on removing elements from an array:

  1. ARRAY.pop() to remove the last element.
  2. ARRAY.shift() to remove the first element.
  3. delete ARRAY[2] will remove the third element in the array (the first element is 0).
  4. var ARRAY = slice(2) to extract the third to last elements (remove first and second elements).
  5. var ARRAY = slice(2, 4) to extract the third to fourth elements (remove all other elements).
  6. ARRAY.splice(2) will keep the first 2 elements and remove all the rest.
  7. ARRAY.splice(1, 3) remove 3 elements starting from the second (remove the second, third, and fourth elements).

That covers the basics, but let us walk through detailed examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Remove Elements Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

REMOVE ELEMENTS

All right, let us now get into the examples on how to remove array elements in Javascript.

 

1) POP FUNCTION

1-pop.html
// (A) THE ARRAY
var arr = ["First", "Second", "Third", "Forth", "Fifth"];
 
// (B) POP - REMOVE LAST ELEMENT
// First, Second, Third, Forth
arr.pop();
console.table(arr);

As in the introduction above, pop() simply removes the last element from the array.

 

2) SHIFT FUNCTION

2-shift.html
// (A) THE ARRAY
var arr = ["First", "Second", "Third", "Forth", "Fifth"];
 
// (B) SHIFT - REMOVE FIRST ELEMENT
// Second, Third, Forth, Fifth
arr.shift();
console.table(arr);

The cousin of pop(), shift() will remove the first element from the array instead.

 

 

3) DELETE ELEMENT

3-delete.html
// (A) THE ARRAY
var arr = ["First", "Second", "Third", "Forth", "Fifth"];
 
// (B) REMOVE THIRD ELEMENT (INDEX OF FIRST ELEMENT IS 0)
// First, Second, Forth, Fifth
delete arr[2];
console.table(arr);

Now, delete may seem simple enough, but there is a potential problem with it. In this example, the original array is:

Index Element
0 First
1 Second
2 Third
3 Forth
4 Fifth

After deleting the element at index 2, the array becomes:

Index Element
0 First
1 Second
3 Forth
4 Fifth

Yes, take extra note that the second element is gone, but it is not re-indexed in running order. Just be careful with this, and if you are looking to maintain a running order, use splice() instead (see example below).

 

4) SLICE FUNCTION

4-slice.html
// (A) ONE PARAMETER : SLICE(N)
// EXTRACT FROM N TO LAST ELEMENT : FORTH, FIFTH
var arrA = ["First", "Second", "Third", "Forth", "Fifth"];
arrA = arrA.slice(3);
console.table(arrA);
 
// (B) TWO PARAMETERS : SLICE(N, M)
// EXTRACT FROM N TO M-1 : THIRD, FORTH
var arrB = ["First", "Second", "Third", "Forth", "Fifth"];
arrB = arrB.slice(2, 4);
console.table(arrB); 

The slice() function does not actually remove elements from an array, but we can use it to extract parts of an array.

  • If we provide 1 parameter, slice(N) will extract elements from N to the end of the array.
  • If we provide 2 parameters, slice(N, M) will extract elements from N to M-1.

 

 

5) SPLICE FUNCTION

5-splice.html
// (A) ONE PARAMETER : SPLICE(N)
// KEEP FIRST N ELEMENTS : FIRST, SECOND
var arrA = ["First", "Second", "Third", "Forth", "Fifth"];
arrA.splice(2);
console.table(arrA);
 
// (B) TWO PARAMETERS : SPLICE(N, M)
// REMOVE M ELEMENTS STARTING FROM N : FIRST, SECOND, FIFTH
var arrB = ["First", "Second", "Third", "Forth", "Fifth"];
arrB.splice(2, 2);
console.table(arrB);
 
// (C) MORE THAN 2 PARAMETERS : SPLICE(N, M, R, R...)
// SAME AS TWO PARAMETERS BUT REPLACES WITH R INSTEAD : FIRST, SECOND, FOO, BAR, FIFTH
var arrC = ["First", "Second", "Third", "Forth", "Fifth"];
arrC.splice(2, 2, "FOO", "BAR");
console.table(arrC);

The splice() function is a rather confusing one, but it also very flexible.

  • If one parameter is given, splice(N) will keep the first N elements.
  • If two parameters are given, splice(N, M) will remove M number of elements, starting from N.
  • Lastly, if there are more than 2 parameters splice(N, M, R, R, ...). This will act exactly the same as two parameters, but with the elements replaced with R.

 

6) FILTER FUNCTION

6-filter.html
// (A) THE ARRAY
var arr = ["Firs", "Second", "Third", "Frth", "Fifth"];
 
// (B) CUSTOM FILTER FUNCTION : KEEP ONLY IF MORE THAN 4 CHARACTERS
function check (item) {
  if (item.length > 4) { return item; }
}
 
// (C) ARRAY FILTER
// SECOND, THIRD, FIFTH
var result = arr.filter(check);
console.table(result);

Finally, if you have some very “specialized conditions” on which element to keep or remove – filter() is your best friend.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Remove Elements From Array (Click To Enlarge)

 

SUMMARY

Function/Operator Description Reference Link
pop() Removes the last element of the array. Click Here
shift() Removes the first element of the array Click Here
slice() Extracts a part of the array. Click Here
splice() The flexible one – Use this to remove or replace elements of an array. Click Here
filter() Accepts a function – Use regular expressions and/or operators to create your own custom filter. Click Here
delete ARRAY[N] Deletes the elements at the specified index. Click Here

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *