How to delete element from array js

How to remove items from an array in JavaScript

Last week, we looked at different ways to add items to an array in JavaScript. Today, you’ll learn how to remove single as well as multiple elements from an array in JavaScript.

JavaScript provides many ways to remove elements from an array. You can remove an item:

Removing an element by index

If you already know the array element index, just use the Array.splice() method to remove it from the array. This method modifies the original array by removing or replacing existing elements and returns the removed elements if any.

Let us say you got the following array, and you want to remove the element at index 2 ( Cherry ):

Want to remove more than one items? Just pass the count to Array.splice() like below:

The second argument of Array.splice() is the number of elements to remove. Remember that Array.splice() modifies the array in place and returns a new array containing the elements that have been removed.

Removing an element by value

If you know the element value, first use the Array.indexOf() method to find the index of the element in the array and then use Array.splice() to remove it.

Here is an example:

Note that the Array.indexOf() method returns the index of the first matching element. If the array contains multiple elements with the same values, only the first element will be removed.

To filter out all elements with the same value from an array, use the Array.filter() method instead:

The Array.filter() method creates a new array populated with all array elements that pass a certain condition. This method doesn’t modify the original array. Take a look at this article to learn more about the Array.filter() method.

Removing an element from the end of an array

The Array.pop() method can be used to remove an element from the end of an array. This method removes the last element and returns it:

Removing an element from the beginning of an array

The Array.shift() method works exactly like Array.pop() except that it removes an element from the start of the array. All other elements are shifted to a lower index.

Removing all elements from an array

To remove all elements from an array, just set the array’s length property to 0:

Take a look at this article to learn more about JavaScript arrays and how to use them to store multiple pieces of information in one single variable.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

How to remove element from an array in JavaScript?

I want to remove the first element of the array so that it becomes:

To extend this question, what if I want to remove the second element of the array so that it becomes:

12 Answers 12

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

shift() is ideal for your situation. shift() removes the first element from an array and returns that element. This method changes the length of the array.

For a more flexible solution, use the splice() function. It allows you to remove any item in an Array based on Index Value:

is non destructive, splice and shift will modify your original array

The Array.prototype.shift method removes the first element from an array, and returns it. It modifies the original array.

Maybe something like this:

Wrote a small article about inserting and deleting elements at arbitrary positions in Javascript Arrays.

Here’s the small snippet to remove an element from any position. This extends the Array class in Javascript and adds the remove(index) method.

So to remove the first item in your example, call arr.remove():

To remove the second item,

Here’s a tiny article with insert and delete methods for Array class.

Essentially this is no different than the other answers using splice, but the name splice is non-intuitive, and if you have that call all across your application, it just makes the code harder to read.

filter() creates a new array with elements that fall under a given criteria from an existing array.

So you can easily use it to remove items that not pass the criteria. Benefits of this function is that you can use it on complex array not just string and number.

Remove first element :

Remove second element :

Remove odd element :

Remove items not in stock

There are multiple ways to remove an element from an Array. Let me point out most used options below. I’m writing this answer because I couldn’t find a proper reason as to what to use from all of these options. The answer to the question is option 3 (Splice()).

See reference for Array.prototype.shift(). Use this only if you want to remove the first element, and only if you are okay with changing the original array.

See reference for Array.prototype.slice(). You cannot remove a specific element from this option. You can take only slice the existing array and get a continuous portion of the array. It’s like cutting the array from the indexes you specify. The original array does not get affected.

delete operator

The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.

Try it

Syntax

Where expression should evaluate to a property reference, e.g.:

Parameters

The name of an object, or an expression evaluating to an object.

The property to delete.

Return value

true for all cases except when the property is an Object.hasOwn non-configurable property, in which case, false is returned in non-strict mode.

Exceptions

Throws TypeError in strict mode if the property is an own non-configurable property.

Description

Unlike what common belief suggests (perhaps due to other programming languages like delete in C++), the delete operator has nothing to do with directly freeing memory. Memory management is done indirectly via breaking references. See the memory management page for more details.

However, it is important to consider the following scenarios:

The following snippet gives a simple example:

Non-configurable properties

In strict mode, this would have raised an exception.

Strict vs. non-strict mode

Cross-browser notes

If you want to use an ordered associative array with support of old runtimes, use a Map object if available (through a polyfill, for example), or simulate this structure with two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.

Examples

delete and the prototype chain

In the following example, we delete an own property of an object while a property with the same name is available on the prototype chain:

Deleting array elements

When you delete an array element, the array length is not affected. This holds even if you delete the last element of the array.

If instead, you want to remove an array element by changing the contents of the array, use the splice() method. In the following example, trees[3] is removed from the array completely using splice() :

JavaScript Array Methods

Converting Arrays to Strings

The JavaScript method toString() converts an array to a string of (comma separated) array values.

Example

The join() method also joins all array elements into a string.

Example

Popping and Pushing

When you work with arrays, it is easy to remove elements and add new elements.

This is what popping and pushing is:

Popping items out of an array, or pushing items into an array.

JavaScript Array pop()

The pop() method removes the last element from an array:

Example

The pop() method returns the value that was «popped out»:

Example

JavaScript Array push()

The push() method adds a new element to an array (at the end):

Example

The push() method returns the new array length:

Example

Shifting Elements

Shifting is equivalent to popping, but working on the first element instead of the last.

JavaScript Array shift()

The shift() method removes the first array element and «shifts» all other elements to a lower index.

Example

The shift() method returns the value that was «shifted out»:

Example

JavaScript Array unshift()

The unshift() method adds a new element to an array (at the beginning), and «unshifts» older elements:

Example

The unshift() method returns the new array length.

Example

Changing Elements

Array elements are accessed using their index number:

Array indexes start with 0:

Example

JavaScript Array length

The length property provides an easy way to append a new element to an array:

Example

JavaScript Array delete()

Using delete leaves undefined holes in the array.

Use pop() or shift() instead.

Example

Merging (Concatenating) Arrays

The concat() method creates a new array by merging (concatenating) existing arrays:

Example (Merging Two Arrays)

const myGirls = [«Cecilie», «Lone»];
const myBoys = [«Emil», «Tobias», «Linus»];

const myChildren = myGirls.concat(myBoys);

The concat() method does not change the existing arrays. It always returns a new array.

The concat() method can take any number of array arguments:

Example (Merging Three Arrays)

The concat() method can also take strings as arguments:

Example (Merging an Array with Values)

Splicing and Slicing Arrays

The splice() method adds new items to an array.

The slice() method slices out a piece of an array.

JavaScript Array splice()

The splice() method can be used to add new items to an array:

Example

The first parameter (2) defines the position where new elements should be added (spliced in).

The second parameter (0) defines how many elements should be removed.

The splice() method returns an array with the deleted items:

Example

Using splice() to Remove Elements

With clever parameter setting, you can use splice() to remove elements without leaving «holes» in the array:

Example

The first parameter (0) defines the position where new elements should be added (spliced in).

The second parameter (1) defines how many elements should be removed.

The rest of the parameters are omitted. No new elements will be added.

JavaScript Array slice()

The slice() method slices out a piece of an array into a new array.

This example slices out a part of an array starting from array element 1 («Orange»):

Example

The slice() method creates a new array.

The slice() method does not remove any elements from the source array.

This example slices out a part of an array starting from array element 3 («Apple»):

Example

The method then selects elements from the start argument, and up to (but not including) the end argument.

Example

If the end argument is omitted, like in the first examples, the slice() method slices out the rest of the array.

Example

Automatic toString()

JavaScript automatically converts an array to a comma separated string when a primitive value is expected.

This is always the case when you try to output an array.

These two examples will produce the same result:

Example

Example

All JavaScript objects have a toString() method.

Finding Max and Min Values in an Array

There are no built-in functions for finding the highest or lowest value in a JavaScript array.

You will learn how you solve this problem in the next chapter of this tutorial.

Sorting Arrays

Sorting arrays are covered in the next chapter of this tutorial.

Complete Array Reference

For a complete Array reference, go to our:

The reference contains descriptions and examples of all Array properties and methods.

How do I remove an object from an array with JavaScript? [duplicate]

I have an JavaScript object like this:

and I have an Array which contains many objects of above. How can I remove an object from that array such as like that:

15 Answers 15

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Well splice works:

But maybe you want something like this?

Just an example below.

If you have access to ES2015 functions, and you’re looking for a more functional approach I’d go with something like:

Watch out though, filter() is non-mutating, so you’ll get a new array back.

Cleanest and fastest way (ES6)

Update: if any chance item doesn’t exist in the look up array please use below solution, updated based on MaxZoom’s comment

You can use either the splice() method or the delete operator.

The main difference is that when you delete an array element using the delete operator, the length of the array is not affected, even if you delete the last element of the array. On the other hand, the splice() method shifts all the elements such that no holes remain in the place of the deleted element.

Example using the delete operator:

Example using the splice() method:

I use this quite a bit so I created a small prototype. Simply looks for the item then pulls it out if there is a match.

Can be called like:

The result would be [12, 56]

Has a boolean return if there was a successful remove, false if the element didn’t exist.

If you know the index that the object has within the array then you can use splice(), as others have mentioned, ie:

If you don’t know the index then you need to search the array for it, ie:

Please note that findIndex method is not supported in Internet Explorer but polyfill can be used from here

we have an array of objects, we want to remove one object using only the id property