JavaScript: Remove element from Array
[UPDATE] Thanks to Joe and others hinting me to the danger of purely using indexOf() without a check for -1. Added it in the last example.
I mean it’s not the first time I am doing it, but it happens always again that I have to look up how exactly it works. And every time I know it is very easy.
So here is how to remove an element from an array, mainly for my poor brain, so it doesn’t have to remember anymore. Though I know, now that I wrote it down I will never forget it again.
DON’T
Unfortunately the most obvioous solution leaves a “hole” in the array :-(.
>>> var list = [4,5,6];
>>> delete list[1];
true
>>> list
[4, undefined, 6]
Sad, but understandable.
DO
So do it right and use splice().
>>> var list = [4,5,6];
>>> list.splice(1, 1); // Remove one element, returns the removed ones.
[5]
>>> list
[4, 6]
Useful DO
Actually, what I mostly need is: remove a certain value from an array.
I.e. I have some list of visible IDs and I want to remove one because it’s not visible anymore. So just extend the above example a bit.
>>> var visibleIds = [4,5,6];
>>> var idx = visibleIds.indexOf(5); // Find the index
>>> if(idx!=-1) visibleIds.splice(idx, 1); // Remove it if really found!
[5]
>>> visibleIds
[4, 6]
I hope I didn’t bore anyone with that 
David Golightly said,
May 20, 2008 at 11:29 pm
Another way to do it would be to track your visible IDs in an object:
>>> var visibleIds = {4: true, 5: true, 6: true};
>>> delete visibileIds[5];
>>> visibleIds
{4:true, 6: true}
since what you want is more like set logic, where no item can appear more than once. Then you can also do membership tests like
>>> 5 in visibleIds
false
The only drawback is, you can only use object literals like this for strings (and things that can be converted to and from string values, like numbers).
Wolfram said,
May 21, 2008 at 10:15 pm
There are too many differences between arrays and objects in JavaScript, so I think the object way is very special and you should really _know_ when and why to use it.
Simple things like .length, .sort() and .reverse() can’t be used, so there is quite a difference, as you are saying.
The set logic kind of thing is true, though we should mention that indexOf() returns the first occurence (if no second parameter, the offset is not given), so it’s only kind of a set logic.
Adam said,
August 31, 2008 at 10:13 pm
Great post, looked through three other google results with no luck. Got exactly what I needed here in just two minutes. Thanks again!
Francesco said,
September 22, 2008 at 12:38 pm
Thanks for this solution
Sjoe said,
October 21, 2008 at 11:51 am
Thanks, just what I needed!
Zeal said,
October 29, 2008 at 12:20 pm
Many thanks for it!
Makwana Sachin said,
November 19, 2008 at 7:33 pm
thanks a lot
great solution
pjohndavid said,
November 26, 2008 at 4:57 pm
That was great and simple… thanks!
lp1051 said,
December 7, 2008 at 1:13 am
indexOf() method not supported on arrays in IE6 (don\’t know how 7+), but good tip anyway
Samira said,
December 26, 2008 at 5:43 pm
Thanks alot.
akin said,
January 16, 2009 at 4:56 pm
“I hope I didn’t bore anyone with that ”
nope man, never! instead it was a joy finding and reading this helpful post
Randeep said,
January 28, 2009 at 8:06 pm
Very useful - ta.
Mamoon ur Rasheed said,
May 11, 2009 at 7:58 pm
ROCK ON
adam said,
May 21, 2009 at 3:39 pm
Thanks!
Do Nam Khanh said,
May 27, 2009 at 10:42 am
Thanks for your post
tony said,
June 2, 2009 at 4:34 pm
thanks! just what i needed
haydar said,
July 9, 2009 at 2:41 pm
thanks you very much
because i seach about one hour
I love it
nguyen said,
July 26, 2009 at 10:05 am
thanhks
aal said,
September 8, 2009 at 5:23 pm
great way to do it, too bad it doesn’t work in IE6.. i still have to support that browser
msbrogli said,
October 23, 2009 at 5:31 am
aal, indexOf is not implemented in IE6. So, you could just do it:
if (!Array.prototype.indexOf) {
Array.prototype.indexOf(value, start) {
var i;
if (!start) {
start = 0;
}
for(i=start; i<this.length; i++) {
if(this[i] == value) {
return i;
}
}
return -1;
}
}
Now, it works still in IE6
msbrogli said,
October 23, 2009 at 5:32 am
Sorry…
the correct is: Array.prototype.indexOf: function(value, start)
hehehe
Kent said,
November 24, 2009 at 10:16 pm
Wow. I wish all code tips were like this- short, to the point, and works perfectly!
Oldfield said,
November 26, 2009 at 6:16 am
Simple and nice THANK YOU
C Houghton said,
December 1, 2009 at 8:12 am
Array.prototype.indexOf: function(value, start)
should be
Array.prototype.indexOf = function(value, start)
Joe T. said,
December 10, 2009 at 9:02 pm
Array.indexOf returns -1 when a value is not found in the array. If the offset (first argument) of splice() is negative, the splice begins at the end of the array and moves in reverse:
var arr = [ 3, 4, 5, 6 ];
arr.splice(arr.indexOf(7), 1);
// arr.indexOf(7) == -1, or [ 6 ] from the array
// arr is now [ 3, 4, 5 ];
arr.splice(arr.indexOf(7), 2);
// arr is now [ 3 ];
Use this shortcut with caution!
JungleCoder said,
April 20, 2010 at 7:08 am
nice quick reference and clear explanation, thanks for posting.
also, like the “pythoneer” title, cool
DizzyC said,
April 27, 2010 at 9:10 am
Thanks, useful info. Found it on a quicksearch and it was exactly what i needed.
btopro said,
July 2, 2010 at 7:53 pm
exactly what I was looking for, thanks!
Ventzy said,
July 13, 2010 at 4:23 pm
Wolfram, see Joe T. comment and at least make a note in your code, because if element is not found, last element from the array is removed, which is plain wrong.
Wolfram said,
July 14, 2010 at 4:04 pm
Thanks Ventzy and Joe for pointing it out, I fixed it.