5 Easy Ways To Remove An Element From JavaScript Array [Solved]

When working with JavaScript, it is often necessary to remove elements from an array. This task may seem challenging, especially if you are new to programming. However, there are several easy ways to remove elements from JavaScript arrays, and we will cover them in this article.

By the end of this article, you will have a clear understanding of how to remove elements from arrays in JavaScript with ease.

Following are the 5 easy ways to remove an element from JavaScript array.

Read also Best position to load Js file in the HTML document

1. Remove the element by using `splice()` array function

The splice() method is an easy way to remove elements from JavaScript arrays. It takes two arguments: the starting index and the number of elements to remove. For example, if you want to remove an element at particular index from the array, you can use the following code:

var array = [1,2,3,4];
function remove(value) {
    const i = array.indexOf(value);
    i > -1 ? array.splice(i, 1) : console.warn(value+' not found in the array');
}
remove(3)
Console.log( array );
// output will be: [1,2,4]

Syntax: Recommended to read indexOf() and splice()

Return: Modify the existing array.

2. By using `filter()` array function

The filter() method is another easy way to remove elements from JavaScript arrays. It creates a new array with all the elements that pass the test implemented by the provided function. In other words, it removes the element that does not match the condition. For example, if you want to remove an element with a value of 3 from the array, you can use the following code:

var array = [1,2,3,4];

function array_remove(value) {
    return array.filter(function(item) {
        return item !== value;
    })
}

var filtered_array = array_remove(2);

console.log( array );
console.log( filtered_array );

//output will be
[1,2,3,4]
[1,3,4]

Syntax: Recommended to read about array.filter()

Return: It will return the new array with all elements who make the condition true.

3. Using the `pop()` array function

The pop() method removes the last element from an array. For example, if you want to remove the last element from the array, you can use the following code:

const array = [1, 2, 3, 4, 5];
array.pop();
console.log(array);

Return: It just modify the existing array.

4. Using the `shift()` array function

The shift() method removes the first element from an array. For example, if you want to remove the first element from the array, you can use the following code:

const array = [1, 2, 3, 4, 5];
array.shift();
console.log(array);

Return: It just modify the existing array.

5. Custom array function to remove the element

You can add a new method to array prototype constructor and use throughout the all your scripts.

This is just a fun way to create an array function to remove elements from a javascript array. It is quite easy to create this function with the use of javascript prototyping and array.splice() function. The below code is demonstrating the custom javascript array function. It will help us to remove an element from the given array.

Like add following code to the beginning of the script and enjoy array.remove() function.

Var array = [1,2,3,4,5,6];

if(!Array.prototype.remove){
    Array.prototype.remove = function(element) {
        const i = this.indexOf(element);
        i > -1 ? this.splice(i, 1) : console.warn(element+' not found in the array');
    }
}

array.remove(5);
Console.log( array );
// output will be [1,2,3,4,6]

That’s it, these are the 5 easy ways to remove an element from JavaScript array. If you know more or found any issue with the above methods, please write in the comment section below.

Browser Support

IndexOf() may not be present in all browser, in that case, you can add following code to the beginning of the script.

if (!Array.prototype.indexOf){
  Array.prototype.indexOf = (function(Object, max, min) {
    "use strict"
    return function indexOf(member, fromIndex) {
      if (this === null || this === undefined)
        throw TypeError("Array.prototype.indexOf called on null or undefined")

      var that = Object(this), Len = that.length >>> 0, i = min(fromIndex | 0, Len)
      if (i < 0) i = max(0, Len + i)
      else if (i >= Len) return -1

      if (member === void 0) {        // undefined
        for (; i !== Len; ++i) if (that[i] === void 0 && i in that) return i
      } else if (member !== member) { // NaN
        return -1 // Since NaN !== NaN, it will never be found. Fast-path it.
      } else                          // all else
        for (; i !== Len; ++i) if (that[i] === member) return i 

      return -1 // if the value was not found, then return -1
    }
  })(Object, Math.max, Math.min)
}

For more info about browser, support click here.