JavaScript Remove Element From Array

In this article, we are going to learn how javascript remove element from array by their index, by their value, from the beginning or from the end of the array. We will look at many different methods to remove elements.

In JavaScript, there is no direct method to remove an element from an array-like Array.remove(). Instead, javascript has other methods that can be used to remove an element from an array.

However, there is a direct method if you want to remove elements from either the beginning or the end of the array.

But in general, we remove elements from the unknown positions in the array. It could be from the beginning, end, or any position in the array. So we need to know the position of the element to remove.

Quick Solution

Example

let arr = [1, 2, 3, 4, 5];
// remove from the beginning
arr.shift(); // [2, 3, 4, 5]
console.log(arr);

arr = [1, 2, 3, 4, 5];
// remove from the end
arr.pop(); // [1, 2, 3, 4]
console.log(arr);

arr = [1, 2, 3, 4, 5];
// remove from any position (index 2 here)
arr.splice(2, 1); // [1, 2, 4, 5]
console.log(arr);
javascript remove element from array

    Table Of Contents

  1. Remove element from the beginning
    1. Remove beginning using shift Method
    2. Remove beginning using splice Method
  2. Remove element from the end
    1. Remove end using Pop Method
    2. Remove end using Splice Method
  3. Javascript remove element from array by index
    1. Remove by index splice Method
    2. Remove by index filter Method
  4. Javascript remove element from array by value
  5. Remove duplicate values
  6. Remove object from an array

Remove element from beginning of array

Removing an element from the beginning of the array is very simple. We can use 2 methods to remove an element from the beginning of the array.

1. Remove Beginning Using shift() Method

shift() is a direct method if you want to remove elements from the beginning of the array.

This method removes the first element of the array and returns it. The method also changes the length of the array.

The method is called upon an array and needs no parameters.

Example

let arr = [1, 2, 3, 4, 5];

// remove first element
arr.shift();
console.log(arr); // first element '1' is removed

2. Remove Beginning Using splice() Method

Another way that can be used to remove the first element is the splice() method.

The splice() method is a special method. It is a multipurpose method and can perform multiple tasks.

It can be used to remove elements from any index value and add elements to the array.

Syntax:

arr.splice(index, howManyToRemove, elementToAdd);

The splice() method takes three parameters:

Here we will only use 2 parameters as we do not want to add any elements but just want to remove them.

To remove elements from the beginning our index will be 0 and the number of elements to remove is our choice.

Example

let arr = [1, 2, 3, 4, 5, 6, 7, 8];

// remove first element using splice
arr.splice(0, 1); // index 0, howMany 1
console.log(arr); // element at index 0 removed

// remove first 3 elements using splice
arr.splice(0, 3); // index 0, howMany 3
console.log(arr);

Remove element from end of array

Removing elements from the array can be done in 2 ways.

1. Remove End Using pop() Method

The direct method to remove the last element from the array is array.pop().

The array.pop() method removes the last element from the array and returns the removed element. This method also reduces the length of the array by 1.

The array.pop() method accepts no parameters.

Example

let arr = [1, 2, 3, 4, 5];

// remove last element
arr.pop();
console.log(arr); // last element '5' removed

2. Remove End Using splice() Method

The splice() method can also remove the last element from the array. We just need to change the index value.

Let's use the splice() method to remove the last element from the array.

To remove the last element, we need to pass the index as array.length -1.

Example

let arr = [1, 2, 3, 4, 5];

// remove last element using splice
arr.splice(arr.length - 1, 1);
console.log(arr); // last element '5' removed

Javascript Remove Element From Array By Index

If you know the index of the element then removing it from an array is like cutting butter with a knife. Here are 2 ways to remove an element from an array using its index.

1. Remove By Index splice() Method

The splice() method is most commonly used to remove an element from an array. You can set a start index and the number of elements to remove. The method will remove a specified number of elements from the array starting from the specified index.

To remove an element from a known index pass the index value in the method. Example: arr.splice(i, 1) remove 1 element from index i.

Example

let arr = [1, 2, 3, 4, 5, 6, 7, 8];

// remove element at index 2
arr.splice(2, 1); // index = 2
console.log(arr); // element at index 2 (3) removed

// remove element at index 4
arr.splice(4, 1); // index = 4
console.log(arr); // '6' removed

2. Remove By Index pop() Method

The filter() method can also be used to remove elements from any index value.

The filter() method takes a callback function as a parameter. The callback function is called for each element in the array. If the callback function returns true then the element is kept in the array. If the callback function returns false then the element is removed from the array.

Syntax

array.filter(callback(element[, index[, array]]))

The callback function is called with 3 parameters:

Example

let arr = [1, 2, 3, 4, 5, 6, 7, 8];
// remove element at index 2
arr = arr.filter(function(element, index) {
  return index !== 2;
});
console.log(arr); // element at index 2 removed

// remove element at index 4
arr = arr.filter(function(element, index) {
  return index !== 4;
});
console.log(arr); // '6' removed

Javascript Remove Element From Array By Value

To remove an element by its value you can start with finding the element's index first and then use the same method as above to remove the element.

To find the index of an element you can use the indexOf() method. It takes a value as a parameter and returns the index of the first occurrence of the value in the array.

Get the index then apply either splice() or filter() method.

Example

let arr = [1, 2, 5, 4, 5, 6, 7, 5];
let element = 5;
// get index of element
let index = arr.indexOf(element);

// remove element at index
arr.splice(index, 1);
console.log(arr);

Remove all occurrence of a value

The above example removes only the first occurrence of the element. To remove all occurrences of the element you can use the filter() method or use the loop with the splice() method.

Remove all occurrences of a given value using the filter() method.

Example

let arr = [1, 2, 5, 4, 5, 6, 7, 5];
let element = 5;

arr = arr.filter(function(element) {
  return element !== 5;
});
console.log(arr); // all occurrences of element 5 removed

Remove all occurrences of a given value using the splice() method.

Example - Remove all occurrences with splice

let arr = [1, 2, 5, 4, 5, 6, 7, 5];
let element = 5;

for(let i = 0; i < arr.length; i++) {
  if(arr[i] === element) {
    arr.splice(i, 1);
    i--;
  }
}
console.log(arr); // all occurrences of element 5 removed

Remove Duplicates Values

If you have an array with duplicate values then you can remove them using the filter() method.

Use the filter() method and check for the index of the element if the found index matches the current index then remove the element.

Example

let arr = [1, 2, 5, 1, 5, 6, 7, 5];
// remove duplicate elements
arr = arr.filter(function(element, index, array) {
  return array.indexOf(element) === index;
});

console.log(arr); // [1, 2, 5, 6, 7]

Code Explanation: The filter method removes the element from the array if the return value is false. The indexOf() method returns the index of the first occurrence of the element in the array. If there is a duplicate then its index and index returned by the indexOf method will not match and the element will be removed.

Remove Object from Array

To remove an object from an array again you can use the filter() method.

Check for the value of the property of the object and if the value matches the value of the current element then remove the element.

Example

let arr = [
  { name: 'John', age: 30 },
  { name: 'Mike', age: 20 },
  { name: 'Jane', age: 25 }
];

let minAge = 28;
// remove object from array
arr = arr.filter(function(element) {
  return element.age >= minAge;
});
console.log(arr);

Conclusions

Javascript removes an element from the array using mainly 2 methods: the splice() method and filter(). These methods can remove elements for any index or any value. Whereas shift() and pop() methods remove the first and last element respectively.

We have discussed various ways and different scenarios to remove an element from an array. The most common way is to use the splice() method.