By Walker


2011-04-23 22:17:18 8 Comments

I have an array of numbers, and I'm using the .push() method to add elements to it.

Is there a simple way to remove a specific element from an array?

The equivalent of something like -

array.remove(number);

I have to use core JavaScript - frameworks are not allowed.

30 comments

@Kashif Iftikhar 2020-02-28 04:31:04

Following are some Methods that might help you in removing specific item from Array.

1. Array filter Method to Remove Items By Value

Unlike the splice method, filter creates a new array. filter() does not mutate the array on which it is called, but returns a new array.

filter() has a single parameter, a callback method. The callback is triggered as the filter method iterates through the array elements. It will pass three values to the callback: the current value or element, the current array index and the full array.

The callback method should return either true or false. It is your responsibility to test the value (element) to see if it meets your criteria. If it does you can return true. Elements that return true are added to the new, filtered array.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

var filtered = array.filter(function(value, index, arr){

    return value > 5;

});

//filtered => [6, 7, 8, 9]
//array => [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

You should note a new array containing matching values is returned. The original array is left untouched. I find this useful because I often want to retain an original data source, but retrieve subsets based on different logic sets.

2. The Lodash Array Remove Method

Sometimes utility libraries are the best way to solve more complex problems. Lodash provides a rich set of array manipulation methods, one being remove.

The Lodash remove method works much like the array filter method, but sort of in reverse. It does not save the original array values, but removes matching elements. It returns the matching elements as a new array.

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 === 0;
});

console.log(array);
// => [1, 3]

console.log(evens);
// => [2, 4]

3. Making a Remove Method

As I mentionmed before, there is no native Array.remove method. The Lodash method does solve this problem, but you may not always want to use Lodash. This does not mean you cannot create a utility method. John Resig gave us a model to follow, however he extended the Array prototype, which is a bad idea.

Instead I created an Array remove utility method that can be added to a helper or utility library. Like the Lodash remove method the first parameter is the target array. It uses Array.filter to return elements not matching a value.

function arrayRemove(arr, value) {

   return arr.filter(function(ele){
       return ele != value;
   });

}

var result = arrayRemove(array, 6);

// result = [1, 2, 3, 4, 5, 7, 8, 9, 0]

This method is simple, it assumes simple values like numbers or strings. You could modify this method to use a custom comparison method, but I think it would be easier to just use the filter method directly.

4. Explicitly Remove Array Elements Using the Delete Operator

You can remove specific array elements using the delete operator:

var ar = [1, 2, 3, 4, 5, 6];
delete ar[4]; // delete element with index 4
console.log( ar ); // [1, 2, 3, 4, undefined, 6]
alert( ar ); // 1,2,3,4,,6

Using the delete operator does not affect the length property. Nor does it affect the indexes of subsequent elements. The array becomes sparse, which is a fancy way of saying the deleted item is not removed but becomes undefined. Compare using delete with the splice method described below.

The delete operator is designed to remove properties from JavaScript objects, which arrays are objects.

The reason the element is not actually removed from the array is the delete operator is more about freeing memory than deleting an element. The memory is freed when there are no more references to the value.

@Kinslert Virguez. 2019-09-17 22:49:59

You can create an index with an all accessors example:

<div >
</div>

function getIndex($id){
  return (
    this.removeIndex($id)
    alert("This element was removed")
  )
}


function removeIndex(){
   const index = $id;
   this.accesor.id.splice(index.id) // You can use splice for slice index on
                                    // accessor id and return with message
}
<div>
    <fromList>
        <ul>
            {...this.array.map( accesors => {
                <li type="hidden"></li>
                <li>{...accesors}</li>
            })

            }
        </ul>
    </fromList>

    <form id="form" method="post">
        <input  id="{this.accesors.id}">
        <input type="submit" callbackforApplySend...getIndex({this.accesors.id}) name="sendendform" value="removeIndex" >
    </form>
</div>

@pritam 2019-10-02 07:36:39

Most of the answers here give a solution using -

  1. indexOf and splice
  2. delete
  3. filter
  4. regular for loop

Although all the solutions should work with these methods, I thought we could use string manipulation.

Points to note about this solution -

  1. It will leave holes in the data (they could be removed with an extra filter)
  2. This solution works for not just primitive search values, but also objects.

The trick is to -

  1. stringify input data set and the search value
  2. replace the search value in the input data set with an empty string
  3. return split data on delimiter ,.
    remove = (input, value) => {
        const stringVal = JSON.stringify(value);
        const result = JSON.stringify(input)

        return result.replace(stringVal, "").split(",");
    }

A JSFiddle with tests for objects and numbers is created here - https://jsfiddle.net/4t7zhkce/33/

Check the remove method in the fiddle.

@Stefan Fabian 2020-03-13 13:38:07

So, what exactly is the advantage of this method? What I see is that it's a terribly inefficient and error-prone method of performing a simple task. The result is not parsed again so it returns an array of strings instead of the input type. Even if it was parsed, on arrays of objects it would remove all function members. I don't see any good reason to ever do something like that but given that there are two people who thought this was a good idea, there must be something I'm missing.

@Ajay Thakur 2019-11-04 05:10:50

You can create a prototype for that. Just pass the array element and the value which you want to remove from the array element:

Array.prototype.removeItem = function(array,val) {
    array.forEach((arrayItem,index) => {
        if (arrayItem == val) {
            array.splice(index, 1);
        }
    });
    return array;
}
var DummyArray = [1, 2, 3, 4, 5, 6];
console.log(DummyArray.removeItem(DummyArray, 3));

@Taylor Hawkes 2019-11-06 20:25:28

To find and remove a particular string from an array of strings:

var colors = ["red","blue","car","green"];
var carIndex = colors.indexOf("car"); // Get "car" index
// Remove car from the colors array
colors.splice(carIndex, 1); // colors = ["red", "blue", "green"]

Source: https://www.codegrepper.com/?search_term=remove+a+particular+element+from+array

@Kamil Kiełczewski 2019-12-09 16:04:13

Performance

Today (2019-12-09) I conduct performance tests on macOS v10.13.6 (High Sierra) for chosen solutions. I show delete (A), but I not use it in comparison with other methods, because it left empty space in the array.

The conclusions

  • the fastest solution is array.splice (C) (except Safari for small arrays where it has the second time)
  • for big arrays, array.slice+splice (H) is the fastest immutable solution for Firefox and Safari; Array.from (B) is fastest in Chrome
  • mutable solutions are usually 1.5x-6x faster than immutable
  • for small tables on Safari, surprisingly the mutable solution (C) is slower than the immutable solution (G)

Details

In tests I remove middle element from the array in different ways. The A, C solutions are in-place. The B, D, E, F, G, H solutions are immutable.

Results for array with 10 elements

Enter image description here

In Chrome the array.splice (C) is the fastest in-place solution. The array.filter (D) is the fastest immutable solution. The slowest is array.slice (F). You can perform the test on your machine here.

Results for array with 1.000.000 elements

Enter image description here

In Chrome the array.splice (C) is the fastest in-place solution (the delete (C) is similar fast - but it left an empty slot in the array (so it does not perform a 'full remove')). The array.slice-splice (H) is the fastest immutable solution. The slowest is array.filter (D and E). You can perform the test on your machine here.

var a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var log = (letter,array) => console.log(letter, array.join `,`);

function A(array) {
  var index = array.indexOf(5);
  delete array[index];
  log('A', array);
}

function B(array) {
  var index = array.indexOf(5);
  var arr = Array.from(array);
  arr.splice(index, 1)
  log('B', arr);
}

function C(array) {
  var index = array.indexOf(5);
  array.splice(index, 1);
  log('C', array);
}

function D(array) {
  var arr = array.filter(item => item !== 5)
  log('D', arr);
}

function E(array) {
  var index = array.indexOf(5);
  var arr = array.filter((item, i) => i !== index)
  log('E', arr);
}

function F(array) {
  var index = array.indexOf(5);
  var arr = array.slice(0, index).concat(array.slice(index + 1))
  log('F', arr);
}

function G(array) {
  var index = array.indexOf(5);
  var arr = [...array.slice(0, index), ...array.slice(index + 1)]
  log('G', arr);
}

function H(array) {
  var index = array.indexOf(5);
  var arr = array.slice(0);
  arr.splice(index, 1);
  log('H', arr);
}

A([...a]);
B([...a]);
C([...a]);
D([...a]);
E([...a]);
F([...a]);
G([...a]);
H([...a]);
This snippet only presents code used in performance tests - it does not perform tests itself.

Comparison for browsers: Chrome v78.0.0, Safari v13.0.4, and Firefox v71.0.0

Enter image description here

@Ketan Ramteke 2019-12-24 13:59:43

Array.prototype.filter() can do the job.

Example:

let newArr= [1, 2, 3, 4, 5, 6];

removeNum = numToBeRemoved => arr.filter(num => num != numToBeRemoved);

removeNum(5);

OUTPUT:  [1, 2, 3, 4, 6]

@Arun s 2019-12-27 10:58:34

You can use splice to remove objects or values from an array.

Let's consider an array of length 5, with values 10,20,30,40,50, and I want to remove the value 30 from it.

var array = [10,20,30,40,50];
if (array.indexOf(30) > -1) {
   array.splice(array.indexOf(30), 1);
}
console.log(array); // [10,20,40,50]

@Ravi Makwana 2020-01-09 09:54:49

I found this blog post which is showing nine ways to do it:

9 Ways to Remove Elements From A JavaScript Array - Plus How to Safely Clear JavaScript Arrays

I prefer to use filter():

var filtered_arr = arr.filter(function(ele){
   return ele != value;
})

@Daniel Waltrip 2020-01-23 02:09:59

This doesn't remove the item from the array. It creates a brand new array with some items from the original array filtered out.

@Ravi Makwana 2020-01-23 04:30:34

Yes it will return new array filtered. let me update code

@ifelse.codes 2020-01-31 19:56:47

If the array contains duplicate values and you want to remove all the occurrences of your target then this is the way to go...

let data = [2, 5, 9, 2, 8, 5, 9, 5];
let target = 5;
data = data.filter(da => da !== target);

Note: - the filter doesn't change the original array; instead it creates a new array.

So assigning again is important.

That's led to another problem. You can't make the variable const. It should be let or var.

@Peter Olson 2011-04-23 22:20:56

I don't know how you are expecting array.remove(int) to behave. There are three possibilities I can think of that you might want.

To remove an element of an array at an index i:

array.splice(i, 1);

If you want to remove every element with value number from the array:

for(var i = array.length - 1; i >= 0; i--) {
    if(array[i] === number) {
        array.splice(i, 1);
    }
}

If you just want to make the element at index i no longer exist, but you don't want the indexes of the other elements to change:

delete array[i];

@Felix Kling 2013-01-27 15:30:48

delete is not the correct way to remove an element from an array!

@Peter Olson 2013-01-27 15:36:52

@FelixKling It depends, it works if you want to make it so that array.hasOwnProperty(i) returns false and have the element at that position return undefined. But I'll admit that that's not a very common thing to want to do.

@diosney 2013-02-17 03:44:59

delete will not update the length of the array neither really erases the element, only replaces it with the special value undefined.

@Peter Olson 2013-04-15 19:13:42

@diosney I don't know what you mean when you say it doesn't really erase the element. Further, it does more than simply replacing the value at that index with undefined: it removes both the index and the value from the array, i.e. after delete array[0], "0" in array will return false.

@Bambax 2013-05-23 18:04:43

for(var i=array.length; i>=0; i--) should be for(var i=array.length-1; i>=0; i--) because indexing starts at 0 (there is no element at array[array.length])

@Pingwin Tux 2014-03-13 09:17:27

Splice is operation on range. Remember that operations on ranges can be expensive (uses more CPU). In this example it is two for loops in fact. We should choose more cheap functions if it is possible.

@Jefferey Cave 2014-10-21 23:00:59

delete is a good mechanism if you are dealing with named properties var array=[];array['red']=1;array['green']=2;array['blue']=3;del‌​ete array['green'];

@Eric Elliott 2014-11-20 00:35:22

@Kavius Don't be too embarrassed. I once read a published book on JS that described "associative arrays" in JavaScript exactly like your comment described them. It's an easy mistake to make if you're approaching JavaScript from another language.

@BenG 2015-08-17 15:20:35

in modern js engines, using: array[i] = null is favored instead of delete array[i]

@Paul 2015-08-19 12:03:07

@BenG, can you provide a reference or two for that statement, or at least explain why it's favored?

@Peter Olson 2015-08-19 23:09:51

@BenG That doesn't make sense: they do different things, how can one be favored?

@BenG 2015-08-21 14:50:27

@Paul it's referenced many places(e.g. smashingmagazine.com/2012/11/…). But the basics of it are that the the underlying JS engine will be faster at garbage collection than if you try to manually, and your code will be easier to comprehend if you explicitly set the value. It can be an easy mistake for someone else reading your code if they see delete array[i] to assume the indices of the remaining elements have been updated

@Sandy Gifford 2018-01-26 20:15:17

@BenG your link doesn't address arrays at all (I think? It's a massive page, I just looked at the section you linked) it only talks about nulling references to namespaces. Nulling elements in an array will still keep the reference alive (garbage collection had better never come for my empty array values)...

@Sasa 2018-05-15 09:13:39

Indexed for loop wouldn't work for all arrays. If you previously used delete on the array, then for loop will crash.

@Grant Gryczan 2018-06-09 05:28:16

Downvoted, because some people will skim over the answer, see the delete operation, and just blindly copy it into their code because it looks about right to them. That's not good! Downvoted.

@Peter Olson 2018-06-11 18:15:01

@GrantGryczan That part of the answer is at the very bottom. It's not my fault if people skip to the bottom and ignore the description describing what it does.

@Grant Gryczan 2018-06-12 00:51:37

You don't give a warning either (let alone in bold), that that isn't how you remove things from arrays. The existence of that line of code in this answer is not useful. Here, let me make an edit. I would just recommend completely removing it though. It doesn't add anything of practicality.

@Peter Olson 2018-06-12 02:27:51

@GrantGryczan Sorry, I disagree. I don't see the need for this to be removed. The text above clearly explains what it does, and it helps people who don't know what delete does to understand why it doesn't work as they expect.

@Sebastien H. 2019-01-04 09:25:04

there are far better ways of doing this, delete is a bad practice on an array

@vikramvi 2019-07-11 05:48:31

Refer to answer from @ujeenator, it has more optimal way of doing action

@pritam 2019-10-02 06:24:31

In strict mode, delete wouldn't work.

@Ashish 2019-02-05 05:34:45

Splice, filter and delete to remove an element from an array

Every array has its index, and it helps to delete a particular element with their index.

The splice() method

array.splice(index, 1);    

The first parameter is index and the second is the number of elements you want to delete from that index.

So for a single element, we use 1.

The delete method

delete array[index]

The filter() method

If you want to delete an element which is repeated in an array then filter the array:

removeAll = array.filter(e => e != elem);

Where elem is the element you want to remove from the array and array is your array name.

@Max Alexander Hanna 2019-01-08 14:34:36

Removing a particular element/string from an array can be done in a one-liner:

theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);

where:

theArray : the array you want to remove something particular from

stringToRemoveFromArray : the string you want removed and 1 is the amount of elements you want to remove.

NOTE : If "stringToRemoveFromArray" is not located your in array, this will remove last element of array.

splice :

The splice() method adds/removes items to/from an array, and returns the removed item(s).

indexOf :

The indexOf() command returns the first index at which a given element can be found in the array, or -1 if it is not present. This can be used along with splice() to search for an element and then remove it, even if you don’t know where it is in the array.

Its always good practice to check if the element exists in your array first, before removing it.

if (theArray.indexOf("stringToRemoveFromArray") >= 0){
   theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);
}

If you have access to newer Ecmascript versions on your client's computers (WARNING, may not work on older stations):

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');

Where '3' is the value you want removed from the array. The array would then become : ['1','2','4','5','6']

@jdavid05 2019-04-03 11:52:46

This is the answer that worked for me when trying to update an array based on radio button toggling.

@Fusion 2019-04-06 23:35:39

Beware, if "stringToRemoveFromArray" is not located your in array, this will remove last element of array.

@ujeenator 2013-12-19 19:54:26

Edited on 2016 October

  • Do it simple, intuitive and explicit (Occam's razor)
  • Do it immutable (original array stay unchanged)
  • Do it with standard JavaScript functions, if your browser doesn't support them - use polyfill

In this code example I use "array.filter(...)" function to remove unwanted items from an array. This function doesn't change the original array and creates a new one. If your browser doesn't support this function (e.g. Internet Explorer before version 9, or Firefox before version 1.5), consider using the filter polyfill from Mozilla.

Removing item (ECMA-262 Edition 5 code aka oldstyle JavaScript)

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) {
    return item !== value
})

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

Removing item (ECMAScript 6 code)

let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

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

IMPORTANT ECMAScript 6 "() => {}" arrow function syntax is not supported in Internet Explorer at all, Chrome before 45 version, Firefox before 22 version, and Safari before 10 version. To use ECMAScript 6 syntax in old browsers you can use BabelJS.


Removing multiple items (ECMAScript 7 code)

An additional advantage of this method is that you can remove multiple items

let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

IMPORTANT "array.includes(...)" function is not supported in Internet Explorer at all, Chrome before 47 version, Firefox before 43 version, Safari before 9 version, and Edge before 14 version so here is polyfill from Mozilla.

Removing multiple items (in the future, maybe)

If the "This-Binding Syntax" proposal is ever accepted, you'll be able to do this:

// array-lib.js

export function remove(...forDeletion) {
    return this.filter(item => !forDeletion.includes(item))
}

// main.js

import { remove } from './array-lib.js'

let arr = [1, 2, 3, 4, 5, 3]

// :: This-Binding Syntax Proposal
// using "remove" function as "virtual method"
// without extending Array.prototype
arr = arr::remove(2, 3, 5)

console.log(arr)
// [ 1, 4 ]

Try it yourself in BabelJS :)

Reference

@Ravinder Payal 2017-02-08 14:06:04

but, sometimes we want to remove element from original array(non immutable), for example array used in Angular 2 *ngFor directive

@Greg 2017-03-06 16:46:21

Better than the accepted solution because it does not assume only one occurrence of a match and immutability is preferable

@Nathan 2017-07-17 01:02:59

filter must be much slower for a big array though?

@mench 2017-08-19 11:36:51

What's the point of immutability mentioned if you used assignment of the same variable in your examples? :)

@ujeenator 2017-08-19 12:10:30

@mench because it would be too complex example if I use both reference immutability and data immutability. I would then need to use some kind of state container. Also data immutability is enough to avoid most of side effect errors.

@Soldeplata Saketos 2017-08-28 07:31:58

This is not a good answer, because it creates a new array, thus creates a new reference. It doesn't remove its elements. It creates a new Array and assigns it. So, for instance, having let arr = arr2 = [1,3,2]; and doing that filter arr = arr.filter(el => el !==3) will result on no modification on arr2, while doing the splice, both arrays will be modified.

@Ben Sinclair 2017-12-12 13:05:30

Super slow method.

@ujeenator 2017-12-12 15:00:41

@Andy in comparison to what method and what scenario?

@ujeenator 2017-12-12 15:01:54

@Nathan in comparison to what method and what scenario? By slower you mean execution time?

@Ben Sinclair 2017-12-12 16:42:01

@Ujeenator filter is super slow if you need to remove a single element from an array

@tomaytotomato 2018-03-26 20:23:48

This doesn't work if you only want to remove one occurrence of a value from an array. e.g. [1,2,3,3,4,5].filter(num => num == 3) it will remove both values of 3

@Greg 2018-04-05 20:32:10

There is a small mistake in here. As per Array.prototype.includes(), includes is ECMAScript 2016 Spec

@Stephen 2018-05-28 17:23:38

I love the reasoning behind this answer. Remove items by filtering out the ones you don't want. Brilliant!

@Matthew 2018-08-15 12:50:44

This is a great answer. Splice is a specialized function for mutating not filtering. filter may have slower performance but it is safer and better code. Also, you can filter by index by specifying a second argument in the lambda: arr.filter((x,i)=>i!==2)

@Jeffrey Goines 2019-03-10 04:01:18

Be cautious using filter and assignment when the array is referenced by many.

@Abdennour TOUMI 2016-10-07 19:42:51

ES6 & without mutation: (October 2016)

const removeByIndex = (list, index) =>
      [
        ...list.slice(0, index),
        ...list.slice(index + 1)
      ];
         
output = removeByIndex([33,22,11,44],1) //=> [33,11,44]
      
console.log(output)

@Janardan Prajapati 2020-01-28 12:04:34

You can use

Array.splice(index);

@Tom Wadley 2011-04-23 22:23:50

Find the index of the array element you want to remove using indexOf, and then remove that index with splice.

The splice() method changes the contents of an array by removing existing elements and/or adding new elements.

const array = [2, 5, 9];

console.log(array);

const index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}

// array = [2, 9]
console.log(array); 

The second parameter of splice is the number of elements to remove. Note that splice modifies the array in place and returns a new array containing the elements that have been removed.

@Tom Wadley 2011-04-23 22:28:10

@Peter, yes you might be right. This article explains more and has a workaround for incompatible browsers: developer.mozilla.org/en/JavaScript/Reference/Global_Objects‌​/…

@zykadelic 2013-03-02 02:33:52

You can ease up usage of this by adding a delete function on the array prototype. I’ve taken use of your example in a gist that deletes all targeted elements in the array instead of just 1.

@zykadelic 2013-03-07 21:50:54

It’s too late to edit my last comment but I just want to correct myself. Calling delete on an array is no go in IE 8. I’ve updated the gist to use destroy instead.

@Alexandre Wiechers Vaz 2013-09-26 18:18:20

Does splice preserve the array order??

@TheZ 2013-12-11 19:18:02

@AlexandreWiechersVaz Of course it preserves order, if it didn't then it would be absolutely worthless

@user2443147 2014-06-08 10:42:27

You can overcome the IE browser support problem by including the code given here

@Chris 2014-07-07 14:00:23

indexOf kept returning -1 in my version of Firefox (30.0). I ended up just writing a simple for loop to find the index and it works fine...

@Curtis Yallop 2014-07-31 23:20:49

Related question: How to do it with jQuery (jQuery.grep). stackoverflow.com/questions/3596089/…

@Adrian P. 2015-01-19 13:51:48

@UpTheCreek I thought it is clear: having an array filled dynamically means sometimes you have an empty array. By using this solution you can try to remove the last element which not exist. The result is a JS error. If you have the same number of elements in this array then all is good. You can use it.

@UpTheCreek 2015-01-19 15:47:21

@AdrianP. array.indexOf(testValue) on empty array will be -1, and if you're testing for that then no splice. Maybe the answer has changed since.

@aroth 2015-02-06 01:53:13

And note that if you're working with non-primitive types, Array.indexOf() does not test for object equality. It only works if you pass the exact same object reference. See: jsfiddle.net/b0e7zsm3

@klenium 2015-08-25 19:52:56

@Imray .splice returns the removed element, not the new array. jsfiddle.net/bB7Ey/85

@Thaenor 2015-10-18 15:20:04

This isn't a good method to use when iterating arrays. What happens in my case is that it's not the element in question that gets removed but the one after it. Also, I've used this with jQuery's .each function and it causes issues as the array becomes smaller but it's lenght is still iterated (meaning it will try access empty values in the end). I couldn't reproduce the last error but the first I can show it in this JSBin (jsbin.com/xufovopoji/edit?html,js,output)

@Justin 2015-12-14 20:02:28

Don't use this method with a for loop, instead use while(myarry.lenth--). The reason is "the array is being re-indexed when you do a .splice(), which means you'll skip over an index when one is removed, and your cached .length is obsolete." stackoverflow.com/a/9882349/922522

@Lukas Liesis 2016-01-13 08:08:26

IE 7, IE8, IE9, IE10 ar unsupported by Microsoft itself, why should web developers support those old browsers? Just show notification about upgrading the browser! support.microsoft.com/en-us/lifecycle/…

@Chinmaya B 2016-02-14 15:38:48

Why not use delete method directly like delete arname [index]; ?

@vard 2016-04-26 14:30:27

@LukasLiesis This is never and has never been a developer choice. When you are addressing a specific audience like public organisations that can't upgrade for internal reasons or non US/EU countries (which still have a lot of users on WinXP), you'll have to provide support for IE8 for those users. It just depend of for whom your website is for, you can't have a generic approach on this matter.

@Alexander Craggs 2016-06-10 22:43:54

Can anyone explain how the polyfill actually works? Code looks very interesting. You're comparing infinity (observing variable type) to Math.abs(a) && (a = 0) and doing some incredible other stuff involving >>>?

@John Christian De Chavez 2016-07-12 03:42:06

array.splice() function doesnt work if my index is token with a length of 16 and delete arname [index]; is working for me

@John Christian De Chavez 2016-07-12 04:03:18

Update: i found this post stackoverflow.com/questions/8173210/…. and now i know the difference of splice and delete.

@Константин Ван 2016-09-04 14:04:59

To get the index of an object in an Array by its property, you can use TheArray.map(function(e) {return e.property;}).indexOf(PROPERTY_VALUE_TO_SEARCH)(IE 9+), or TheArray.map(e => e.property).indexOf(PROPERTY_VALUE_TO_SEARCH) if your browser supports Arrow Functons.

@Aykut Yaman 2017-01-11 15:22:15

As @klenium said, the splice() method changes the content of an array, it does not return a new array.

@Sarath S Nair 2017-01-30 04:26:31

arr = [1,2,3,4,5] var filtered = arr.filter(function(ele){ return ele != 3; }); //filtered = [1,2,4,5];

@Greg 2017-03-06 16:27:17

OPs provided spec does not specify an array of unique integers. indexOf will only return the position of the first found match (from optional "fromIndex").

@heringer 2017-05-04 12:30:57

Not sure if it is worth a note, but be aware for the behavior in case of duplicated items. Only the first one is removed in this approach.

@iulial 2017-06-28 13:53:26

In the era of immutability, better use Array.filter() or Array.slice() example here

@Megh 2017-09-26 18:31:05

Wont it shift array Index to lower level and subsequent element wont be available in list if we are looping through an array.

@Alex 2017-10-14 04:28:57

Splice is the best, with delete my JSON.stringify has a null on place that deleted

@MrClan 2018-01-08 09:40:13

@TomWadley why the first if condition is (index > -1) instead of (index != -1) ?

@Tom Wadley 2018-01-11 16:48:28

@MrClan from the docs, it looks like indexOf() will never return a negative number other than -1 so != -1 or !== -1 would be perfectly fine. No particular reason for using > -1.

@Chang 2019-01-27 18:14:59

Splice can be best used when you know the index and all the desired values to be delete, are in a sequence. If you don't know the index, here are some good alternates using splice, filter, shift, pop- stackoverflow.com/a/54390552/8958729

@Jonny 2019-01-28 15:42:46

On a small array, why not just use a simple for loop?

@Christos Karapapas 2019-10-20 07:45:32

Splice is not working as expected if your array contains elements with negative indices.

@ajay kumar 2020-02-19 07:57:18

Working fine for me

@Josh 2019-12-19 09:05:46

Remove a specific element from an array can be done in one line with the filter option, and it's supported by all browsers: https://caniuse.com/#search=filter%20array

function removeValueFromArray(array, value) {
    return array.filter(e => e != value)
}

I tested this function here: https://bit.dev/joshk/jotils/remove-value-from-array/~code#test.ts

@sairfan 2020-01-30 21:03:23

Not valid for all browsers

@Peter Mortensen 2020-03-08 17:25:17

Perhaps qualify "all browsers"?

@Vinod Kumar 2019-10-14 08:38:44

Remove the particular array item

enter image description here

var cars = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

document.getElementById("demo").innerHTML = cars;

for( var i = 0; i < cars.length; i++){ 
   if ( cars[i] === "Banana") {
     cars.splice(i, 1); 
     i--;
   }
}

document.getElementById("demo2").innerHTML =  cars;
p {
  font-size: 20px; 
  padding: 10px; 
  border: 1px dashed tan;
  color: brown;
}
<!DOCTYPE html>
<html>
<body>

<h2>Before</h2>
<p id="demo"></p>
<h2>After</h2>
<p id="demo2"></p>
</body>
</html>

@rajat44 2016-10-04 08:07:50

You can use ES6. For example to delete the value '3' in this case:

var array=['1','2','3','4','5','6']
var newArray = array.filter((value)=>value!='3');
console.log(newArray);

Output :

["1", "2", "4", "5", "6"]

@Claudio Holanda 2017-03-16 15:27:40

This answer is nice because it creates a copy of the original array, instead of modifying the original directly.

@Chang 2019-01-27 19:45:05

Note: Array.prototype.filter is ECMAScript 5.1 (No IE8). for more specific solutions: stackoverflow.com/a/54390552/8958729

@Samer Murad 2019-12-06 11:31:04

a very elegant way to keep immutability of the array... and I HATE the splice method! take my upvote

@Amin Adel 2019-12-16 15:24:17

perfect answer.

@Yohannes Kristiawan 2019-09-18 10:57:57

I would like to suggest to remove one array item using delete and filter:

var arr = [1,2,3,4,5,5,6,7,8,9];
delete arr[5];
arr = arr.filter(function(item){ return item != undefined; });
//result: [1,2,3,4,5,6,7,8,9]

So, we can remove only one specific array item instead of all items with the same value.

@alejoko 2019-02-02 14:41:59

Take profit of reduce method as follows:

Case a) if you need to remove an element by index:

function remove(arr, index) {
  return arr.reduce((prev, x, i) => prev.concat(i !== index ? [x] : []), []);
}

case b) if you need to remove an element by the value of the element (int):

function remove(arr, value) {
  return arr.reduce((prev, x, i) => prev.concat(x !== value ? [x] : []), []);
}

So in this way we can return a new array (will be in a cool functional way - much better than using push or splice) with the element removed.

@Thilina Sampath 2018-08-07 09:37:25

You have 1 to 9 in the array, and you want remove 5. Use the below code:

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var newNumberArray = numberArray.filter(m => {
  return m !== 5;
});

console.log("new Array, 5 removed", newNumberArray);


If you want to multiple values. Example:- 1,7,8

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

var newNumberArray = numberArray.filter(m => {
  return (m !== 1) && (m !== 7) && (m !== 8);
});

console.log("new Array, 1,7 and 8 removed", newNumberArray);


If you want to remove an array value in an array. Example: [3,4,5]

var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var removebleArray = [3,4,5];

var newNumberArray = numberArray.filter(m => {
    return !removebleArray.includes(m);
});

console.log("new Array, [3,4,5] removed", newNumberArray);

Includes supported browser is link.

@mekbib.awoke 2019-08-23 12:20:13

You can extend the array object to define a custom delete function as follows:

let numbers = [1,2,4,4,5,3,45,9];

numbers.delete = function(value){
    var indexOfTarget = this.indexOf(value)

    if(indexOfTarget !== -1)
    {
        console.log("array before delete " + this)
        this.splice(indexOfTarget, 1)
        console.log("array after delete " + this)
    }
    else{
        console.error("element " + value + " not found")
    }
}
numbers.delete(888)
// Expected output:
// element 888 not found
numbers.delete(1)

// Expected output;
// array before delete 1,2,4,4,5,3,45,9
// array after delete 2,4,4,5,3,45,9

@codepleb 2019-04-13 08:51:30

Oftentimes it's better to just create a new array with the filter function.

let array = [1,2,3,4];
array = array.filter(i => i !== 4); // [1,2,3]

This also improves readability IMHO. I'm not a fan of slice, although it know sometimes you should go for it.

@MHOOS 2019-06-20 09:47:31

@codepleb, can you elaborate on why you prefer filter over splice and why you think filter is more readable?

@eightyfive 2019-06-20 10:07:26

Albeit not recommended for lengthy arrays.

@codepleb 2019-06-26 16:12:23

@MHOOS Slice has a lot of options and they are confusing IMHO. You can, if you want, pass a start and end variable and while the start index is included, the end index is not, etc. It's harder to read code playing with slice. If you don't use that too often, you often end up checking the docs during reviews to check if something is correct. Docs: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

@Ashish 2019-01-28 10:47:18

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start

The index at which to start changing the array (with origin 0). If greater than the length of the array, the actual starting index will be set to the length of the array. If negative, it will begin that many elements from the end of the array (with origin -1) and will be set to 0 if the absolute value is greater than the length of the array.

deleteCount Optional

An integer indicating the number of old array elements to remove.

If deleteCount is omitted, or if its value is larger than array.length - start (that is, if it is greater than the number of elements left in the array, starting at start), then all of the elements from start through the end of the array will be deleted. If deleteCount is 0 or negative, no elements are removed. In this case, you should specify at least one new element (see below).

item1, item2, ... Optional

The elements to add to the array, beginning at the start index. If you don't specify any elements, splice() will only remove elements from the array.

For more references, kindly go through:

Array.prototype.splice()

@Chang 2019-01-27 16:55:52

To remove a particular element or subsequent elements, Array.splice() method works well.

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements, and it returns the removed item(s).

Syntax: array.splice(index, deleteCount, item1, ....., itemX)

Here index is mandatory and rest arguments are optional.

For example:

let arr = [1, 2, 3, 4, 5, 6];
arr.splice(2,1);
console.log(arr);
// [1, 2, 4, 5, 6]

Note: Array.splice() method can be used if you know the index of the element which you want to delete. But we may have a few more cases as mentioned below:

  1. In case you want to delete just last element, you can use Array.pop()

  2. In case you want to delete just first element, you can use Array.shift()

  3. If you know the element alone, but not the position (or index) of the element, and want to delete all matching elements using Array.filter() method:

    let arr = [1, 2, 1, 3, 4, 1, 5, 1];
    
    let newArr = arr.filter(function(val){
        return val !== 1;
    });
    //newArr => [2, 3, 4, 5]
    

    Or by using the splice() method as:

    let arr = [1, 11, 2, 11, 3, 4, 5, 11, 6, 11];
        for (let i = 0; i < arr.length-1; i++) {
           if ( arr[i] === 11) {
             arr.splice(i, 1);
           }
        }
        console.log(arr);
        // [1, 2, 3, 4, 5, 6]
    

    Or suppose we want to delete del from the array arr:

    let arr = [1, 2, 3, 4, 5, 6];
    let del = 4;
    if (arr.indexOf(4) >= 0) {
        arr.splice(arr.indexOf(4), 1)
    }
    

    Or

    let del = 4;
    for(var i = arr.length - 1; i >= 0; i--) {
        if(arr[i] === del) {
           arr.splice(i, 1);
        }
    }
    
  4. If you know the element alone but not the position (or index) of the element, and want to delete just very first matching element using splice() method:

    let arr = [1, 11, 2, 11, 3, 4, 5, 11, 6, 11];
    
    for (let i = 0; i < arr.length-1; i++) {
      if ( arr[i] === 11) {
        arr.splice(i, 1);
        break;
      }
    }
    console.log(arr);
    // [1, 11, 2, 11, 3, 4, 5, 11, 6, 11]
    

@Chang 2019-01-27 19:46:27

Note: Array.prototype.filter is ECMAScript 5.1 (No IE8)

@Little Brain 2019-05-30 14:31:47

For option 4, should the loop be 'i < arr.length' not 'i < arr.length-1'?

@Sebastien H. 2018-12-21 15:10:47

To me the simpler is the better, and as we are in 2018 (near 2019) I give you this (near) one-liner to answer the original question:

Array.prototype.remove = function (value) {
    return this.filter(f => f != value)
}

The useful thing is that you can use it in a curry expression such as:

[1,2,3].remove(2).sort()

@Ole 2019-08-04 20:02:53

@AmerllicA 2018-10-30 17:37:42

I want to answer based on ECMAScript 6. Assume, you have an array like below:

let arr = [1,2,3,4];

If you want to delete at a special index like 2, write the below code:

arr.splice(2, 1); //=> arr became [1,2,4]

But if you want to delete a special item like 3 and you don't know its index, do like below:

arr = arr.filter(e => e !== 3); //=> arr became [1,2,4]

Hint: please use an arrow function for filter callback unless you will get an empty array.

@AmerllicA 2020-01-16 13:29:35

Dear @PeterMortensen, Thanks for your great edition.

@Phil 2018-09-12 09:16:36

I had this problem myself (in a situation where replacing the array was acceptable) and solved it with a simple:

var filteredItems = this.items.filter(function (i) {
    return i !== item;
});

To give the above snippet a bit of context:

self.thingWithItems = {
    items: [],
    removeItem: function (item) {
        var filteredItems = this.items.filter(function (i) {
            return i !== item;
        });

        this.items = filteredItems;
    }
};

This solution should work with both reference and value items. It all depends whether you need to maintain a reference to the original array as to whether this solution is applicable.

@Phil 2019-09-18 05:18:23

OP asked about removing a particular (one) element from an array. This function does not terminate when one element is found but keeps comparing every single element in the array until the end is reached.

Related Questions

Sponsored Content

48 Answered Questions

[SOLVED] JavaScript equivalent to printf/String.Format

35 Answered Questions

[SOLVED] How to remove item from array by value?

  • 2010-10-17 17:43:34
  • MacMac
  • 1006353 View
  • 898 Score
  • 35 Answer
  • Tags:   javascript arrays

34 Answered Questions

[SOLVED] Create ArrayList from array

50 Answered Questions

13 Answered Questions

[SOLVED] How can I add new array elements at the beginning of an array in Javascript?

  • 2011-11-10 00:35:22
  • Moon
  • 781607 View
  • 1547 Score
  • 13 Answer
  • Tags:   javascript arrays

42 Answered Questions

[SOLVED] Remove empty elements from an array in Javascript

46 Answered Questions

[SOLVED] Sort array of objects by string property value

17 Answered Questions

[SOLVED] How to insert an item into an array at a specific index (JavaScript)?

42 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

63 Answered Questions

[SOLVED] How can I merge properties of two JavaScript objects dynamically?

Sponsored Content