Tutorials Tonight
Follow Us

JavaScript Remove Element From Array


In this article, we are going to learn how to remove an element from an array by its index, by its value, from the beginning or from the end of the array. We will look at various different ways to remove elements.

In JavaScript, there is no direct method to remove an element from an array like Array.remove(). Instead, we use different approaches to remove elements.

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, from the end, or from any position in the array. So we need to know the position of the element to remove.

    Table Of Contents

  1. Remove element from the beginning of the array
  2. Remove element from the end of the array
  3. Remove the element by index
  4. Remove the element by value
  5. Remove duplicate values
  6. Remove object from an array

Remove element from beginning of array

#1 shift method

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

The shift() method removes the first element from the array and returns the removed element. This method also changes the length of the array.

Example

let arr = [4, 10, 6, 3, 4, 9, 1, 5];

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

#2 splice method

Another way to remove the first element is to use the splice() method.

The splice() method is a multipurpose method. It can be used to remove elements from any index value as well as to add elements to the array.

The splice() method takes three parameters:

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

Example

let arr = [4, 10, 6, 3, 4, 9, 1, 5];

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

Remove element from end of array

#1 pop method

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

The 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.

Example

let arr = [4, 10, 6, 3, 4, 9, 1, 5];

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

#2 splice method

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 and howMany as 1.

Example

let arr = [4, 10, 6, 3, 4, 9, 1, 5];

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

Remove element 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 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.

Example: arr.splice(i, 1) remove 1 element from index i.

Example

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

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

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

#2 filter 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.

The callback function is called with 3 parameters:

Example

let arr = [4, 2, 6, 2, 4, 9, 1, 5];
// 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); // '9' removed

Remove element 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 = [4, 2, 6, 2, 4, 9, 1, 5];
let element = 2;
// get index of element
let index = arr.indexOf(element);

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

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.

Example - Remove all occurrences with filter

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

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

Example - Remove all occurrences with splice

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

for(let i = 0; i < arr.length; i++) {
  if(arr[i] === element) {
    arr.splice(i, 1);
    i--;
  }
}
console.log(arr); // all occurrences of element 2 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 = [4, 2, 6, 2, 4, 9, 1, 5];
// remove duplicate elements
arr = arr.filter(function(element, index, array) {
  return array.indexOf(element) === index;
});

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

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

To remove an element from an array you can use the splice() method or filter() method.

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.