How to remove an item from array in javascript

An array is a collection of values enclosed between square brackets in javascript. It is possible to create an array with pre-defined values and also add values to the array at run time.
Thus, you should also be aware with the mechanism to remove elements from the array at run time. This article will discuss different methods in which an object can be removed from the array at run time or dynamically.

Method 1: Using splice method
This method is used to remove array element at a particular index. splice method takes first argument as the index of the element to be removed. This argument is mandatory.
Since array indexes begin at 0, thus if the value of this argument is 0, first element will be removed while if its value is 1, then second element will be removed and so on.
Second argument defines the number of elements to be removed. If it is set to 0, then no element will be removed irrespective of the first argument.
If it is set to 1, then 1 element(at the index of first argument) will be removed. This argument is optional. If not given, it is considered to be 1.
Example,

let array = [1, "js", 2.5, 36, 59, "Orange"];
array.splice(1); // removes second element
array.splice(1, 0); // removes no element

If the second argument is greater than 1, then an equal number of elements starting from the index given in the first argument will be removed. Thus, for first argument 1 and second as 3, values at index 1, 2 and 3 will be removed from the array.

let array = [1, "js", 2.5, 36, 59, "Orange"];
array.splice(1, 3); // removes 2nd, 3rd and 4th elements
array.splice(2, 2); // removes 3rd and 4th elements

If the first argument is negative then array elements are removed from right end. That is, if the first argument is -1, then the last array element will be removed.
Try yourself with first argument negative and second argument greater than 1 and see what happens.

Method 2: Using filter method
This method can be used to remove array element at a particular index or array item having a particular value.
filter method accepts a callback function as argument and returns an array with elements that fulfill the condition given in the callback function.
This function is invoked for each element of array and takes following arguments.

• value: Value of the current array element. This argument is required.
• index: Index of current array element.  This argument is optional.
• array: Array to which this element belongs or array on which filter method is called.  This argument is optional.

Note that the argument names could be anything. It is not necessary that they should be same as explained above.
Removing element by value
Invoke filter method on the array. In the callback function, compare the first argument with the required value and return it only if the value of current item does not match with the value to be removed.
This way all the elements except the one which needs to be removed will be added to the array. Example,

let array = [1, "js", 2.5, 36, 59, "Orange"];
console.log("Before removal", array);
array = array.filter(function(item) {
   // compare current item with 36
   return item !== 36
});
console.log("After removal", array);

Above example compares the value of each array element with 36 and returns all those items whose value does not match with it. This way 36 is not added to the array.
Note that it is necessary to assign the returned value from filter method to an array(either new or existing one) else you will not be able to see the modifications.
Above code outputs

Removing element by index
As stated above, second argument to the callback function is the index of current array element. Thus, in the callback function compare the element index with the index to be removed and return only those elements whose index does not match with the index that we need to remove. Example,

let array = [1, "js", 2.5, 36, 59, "Orange"];
console.log("Before removal", array);
array = array.filter(function(item, index) {
   // remove element with index 2
   return index !== 2
});
console.log("After removal", array);

Above example returns all those elements whose index is not 2. Thus, element at index 2 or third array element will be removed. Output is

With ES6, arrow function can be used in place of the callback function in filter method as shown below.

let array = [1, "js", 2.5, 36, 59, "Orange"];
console.log("Before removal", array);
array = array.filter(item => item !== 36);
console.log("After removal", array);

Method 3: Using delete function
delete function is followed by the name of array and the index of the element to delete enclosed within square brackets.
One thing to remember with this method is that it removes the element at given index but does not remove its space.
Space of that element is set to empty and also the size or length of the array is not reduced with this method, it remains unchanged. Example,

let array = [1, "js", 2.5, 36, 59, "Orange"];
console.log("Array length before removal:", array.length);
delete array[1];
console.log("Array length after removal:", array.length);
console.log("Array after removal", array);

Above code deletes the element at index 1(second element) of the array and prints the length of the array before and after deletion and also the array contents after deletion.
Look at the output to understand it better.

You can see that it placed empty in place of removed element and also the length of the array does not change.
If you liked this post, then do not forget to hit the clap below.