How to delete an element from an array using JavaScript ?
Last Updated :
23 Aug, 2024
The array is a type of data structure that allows us to store similar types of data under a single variable. The array is helpful to create a list of elements of similar types, which can be accessed using their index.
In this article, we will discuss different ways to remove elements from the array. There are many methods that are used to remove elements from the JavaScript array which are discussed below.
Using Array shift() Method
This method is used to delete one or more elements from the array and these elements get deleted from the beginning of the array because of the deleted elements or items from the array, the length of the array also gets decreased by the number of elements deleted from the array.
Below are examples of how to do this: Let’s see how to delete an element at the beginning of the array using the shift() function.
Input: arr[] = {3, 1, 2, 5, 90}, size = 5, capacity = 5
Output: arr[] = {_, 1, 2, 5, 90}, size = 4, capacity = 5Example 1: In this example, we use an array to delete elements at the beginning of an array using the shift() function.
JavaScript
const arr = [3, 1, 2, 5, 90];
arr.shift();
console.log(arr);
Example 2: In this example, we use an associative array to delete elements at the beginning of an array using the JavaScript array shift() function.
JavaScript
let arr = [
{ key: 'first', val: '3' },
{ key: 'second', val: '1' },
{ key: 'third', val: '2' },
{ key: 'fourth', val: '5' },
{ key: 'fifth', val: '90' }
];
arr.shift();
console.log(arr);
Output[
{ key: 'second', val: '1' },
{ key: 'third', val: '2' },
{ key: 'fourth', val: '5' },
{ key: 'fifth', val: '90' }
]
Using the JavaScript array pop() Method
This method is used to pop or delete elements or items from an array. We can pop one or more elements from the array and these elements get deleted from the end of the array because of the popped elements from the array, the length of the array also gets decreased by the number of elements popped from the array.
Below are examples of how to do it: Let’s see how to delete an element at the end of the array using the pop() function.
Input: arr[] = {3, 1, 2, 5, 90}, size = 5, capacity = 5
Output: arr[] = {3, 1, 2, 5, _}, size = 4, capacity = 5Example 1: In this example, we use an array to delete elements at the end of an array using the JavaScript array pop() function.
JavaScript
let arr = [3, 1, 2, 5, 90];
console.log("Orginal array: " + arr);
console.log("Extracted element: " + arr.pop());
console.log("Remaining elements: " + arr);
OutputOrginal array: 3,1,2,5,90
Extracted element: 90
Remaining elements: 3,1,2,5
Example 2: In this example, we use an associative array to delete elements at the end of an array using the pop() function.
JavaScript
let arr = [
{ key: 'first', val: 3 },
{ key: 'second', val: 1 },
{ key: 'third', val: 2 },
{ key: 'fourth', val: 5 },
{ key: 'fifth', val: 90 }
];
let val = arr.pop();
console.log('key popped: ' + val.key);
console.log('value popped: ' + val.val);
Outputkey popped: fifth
value popped: 90
Using JavaScript splice() Method
The JavaScript Array splice() Method is an inbuilt method in JavaScript that is used to modify the contents of an array by removing the existing elements and/or by adding new elements.
Example:
JavaScript
function func() {
let array = ["HTML", "CSS", "JS", "Bootstrap"];
console.log("Original array: " + array);
// Add 'React' and 'Php' after removing 'JS'.
let removedElement = array.splice(1, 1, 'PHP', 'React')
console.log("Array after splice: " + array);
console.log("Removed element: " + removedElement);
}
func();
OutputOriginal array: HTML,CSS,JS,Bootstrap
Array after splice: HTML,PHP,React,JS,Bootstrap
Removed element: CSS
Using JavaScript Array filter() Method
The JavaScript Array filter() Method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument method.
Example:
JavaScript
// Declare and initialize an array
let array = ["algo", "maths", "science", "biology"]
// Using filter method to create a remove method
function arrayRemove(arr, value) {
return arr.filter(function (geeks) {
return geeks != value;
});
}
let result = arrayRemove(array, "algo");
console.log("Remaining elements: " + result)
OutputRemaining elements: maths,science,biology
Using the delete Operator
The delete operator can be used to remove an element from an array, but there are a few key differences compared to the methods described above:
- The delete operator removes the element, but does not reindex the array or change its length. Instead, it leaves an empty slot (undefined) in the array.
Example:
JavaScript
let arr = [1, 2, 3, 4, 5];
delete arr[2];
console.log(arr);
console.log(arr.length);
Output[ 1, 2, <1 empty item>, 4, 5 ]
5
Similar Reads
How to delete an Element From an Array in PHP ?
To delete an element from an array means to remove a specific value or item from the array, shifting subsequent elements to the left to fill the gap. This operation adjusts the array's length accordingly, eliminating the specified element. This article discusses some of the most common methods used
4 min read
How to remove an element from an array in JavaScript?
Removing elements from an array is a fundamental operation in JavaScript, essential for data manipulation, filtering, and transformation. This guide will explore different methods to efficiently remove elements from an array, enhancing your understanding and capability in handling arrays. 1. Using p
3 min read
How to Remove First and Last Element from Array using JavaScript?
Removing the first and last elements from an array is a common operation. This can be useful in various scenarios, such as data processing, filtering, or manipulation. Example: Input: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]Output: [ 2, 3, 4, 5, 6, 7, 8, 9 ]Removing first and last element in array can be d
2 min read
JavaScript Program to Delete Middle Element from an Array
In this article, we will learn different approaches to how we can delete the middle element from a given array. We will use these JavaScript methods to achieve this: Methods to Delete Middle Element from an ArrayTable of Content Methods to Delete Middle Element from an ArrayUsing JavaScript Spread O
4 min read
How to Remove Duplicate Elements from an Array using Lodash ?
Removing duplicate elements from an array is necessary for data integrity and efficient processing. The approaches implemented and explained below will use the Lodash to remove duplicate elements from an array. Table of Content Using uniq methodUsing groupBy and map methodsUsing xor functionUsing un
3 min read
JavaScript - Delete an Item From an Array
In Javascript, we do not have any array.remove() method for deleting the element. Here are the various methods we can delete an item from an array using JavaScript. 1. Using for loop and push() MethodThe push() method will not mutate the original array. First, you have to create an empty() array and
4 min read
How to Remove duplicate elements from array in JavaScript ?
In this article, we will discuss the methods to remove duplicate elements from a Javascript array. There are various methods to remove duplicates in the array. These are the following ways: Table of Content Using filter() MethodUsing set() MethodUsing forEach() MethodUsing reduce() MethodUsing index
4 min read
PHP | Deleting an element from array using array_diff()
Given an array, we have to delete an element from that array using the array_diff() function in PHP. Examples: Input : $arr = array(2, 8, 9, 7, 6, 5); $arr = array_diff($arr, array(9)); Output : Array ( [0] => 2 [1] => 8 [3] => 7 [4] => 6 [5] => 5 ) Input : $arr = array("shubham", "ak
2 min read
JavaScript - Delete First Occurence of Given Element from a JS Array
These are the following ways to delete elements from a specified Index of JavaScript arrays: 1. Using indexOf() and splice() - Most UsedThe indexOf() method finds the first occurrence of the element in the array, and splice() removes it at that index. This approach directly modifies the original arr
2 min read
Remove Duplicate Elements from JavaScript Array
To Remove the elements from an array we can use the JavaScript set method. Removing duplicate elements requires checking if the element is present more than one time in the array. 1. Using JavaScript Set() - Mostly UsedThe JavaScript Set() method creates an object containing only unique values. To r
3 min read