59

There are many questions about this, not least: jQuery version of array contains, a solution with the splice method and many more. However, they all seem complicated and annoying.

With the combined powers of javascript, jQuery and coffeescript, what is the very cleanest way to remove an element from a javascript array? We don't know the index in advance. In code:

a = [4,8,2,3]
a.remove(8)     # a is now [4,2,3]

Failing a good built-in method, what is a clean way of extending javascript arrays to support such a method? If it helps, I'm really using arrays as sets. Solutions will ideally work nicely in coffeescript with jQuery support. Also, I couldn't care less about speed, but instead prioritize clear, simple code.

Improve this question

8 Answers 8

Reset to default
88

CoffeeScript:

Array::remove = (e) -> @[t..t] = [] if (t = @indexOf(e)) > -1

Which simply splices out the element at position t, the index where e was found (if it was actually found t > -1). Coffeescript translates this to:

Array.prototype.remove = function(e) {
    var t, _ref;
    if ((t = this.indexOf(e)) > -1) {
        return ([].splice.apply(this, [t, t - t + 1].concat(_ref = [])), _ref);
    }
};

And if you want to remove all matching elements, and return a new array, using CoffeeScript and jQuery:

Array::remove = (v) -> $.grep @,(e)->e!=v

which translates into:

Array.prototype.remove = function(v) {
    return $.grep(this, function(e) {
        return e !== v;
    });
};

Or doing the same without jQuery's grep:

Array::filterOutValue = (v) -> x for x in @ when x!=v

which translates to:

Array.prototype.filterOutValue = function(v) {
    var x, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = this.length; _i < _len; _i++) {
        x = this[_i];
        if (x !== v) {
            _results.push(x);
        }
    }
    return _results;
};
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Clearly you have been using CoffeeScript for much longer than I; +1 for what looks to be very idiomatic.
Thanks @Amir for a great, idiomatic answer. The other answers are helpful, too; I like this one because it uses the available tools to make things simpler. One minor change: I'll probably call it Array::removing, as in smaller_array = larger_array.removing(something), so it's clear that it returns a new array.
God damn coffeescript is beautiful. I believe you can get rid of the @.indexOf and just do @indexOf (no dot).
Get rid of the unnecessary concat: Array::remove = (v) -> @splice i, 1 if i = @indexOf(v) > -1
Thanks to this $.grep @,(e)->e!=v I will never think about using CoffeeScript, ever again. Readability equals zero.
|
28

Using vanilla Javascript:

Array.prototype.remove = function(elem) {
    var match = -1;

    while( (match = this.indexOf(elem)) > -1 ) {
        this.splice(match, 1);
    }
};

var a = [4, 8, 2, 3];

a.remove(8);

Only jQuery:

jQuery.removeFromArray = function(value, arr) {
    return jQuery.grep(arr, function(elem, index) {
        return elem !== value;
    });
};

var a = [4, 8, 2, 3];

a = jQuery.removeFromArray(8, a);
Improve this answer

4 Comments

Although I of course should benchmark, I would suspect this would be slower due to indexOf being O(n), giving you total complexity O(n * m + n) for m the number of matches. My answer makes a single pass, giving O(n) complexity.
@Domenic: of course. .index() is not as fast, but it's fair enough and less code. If I was after performance, I'd using a while() loop anyway: see jsperf.com/benchmark-for-domenic
Haha, your jsPerf has uncovered a difference between Chrome and Firefox 4b10, nice! The for version ran much faster in my Firefox than it apparently did in your Chrome. Cool!
@Domenic: indeed pretty wierd.
14

This is really easy with jQuery:

var index = $.inArray("value", myArray);
if(index != -1)
{
  myArray.splice(index, 1);
}

Notes:

splice returns the elements that were removed, so don't do myArray = myArray.splice(). myArray.splice(index,1) means "remove the array element at index 'index' from the array".

$.inArray returns the index in the array of the value you're looking for, or -1 if the value isn't in the array.

Improve this answer

3 Comments

almost as easy as with vanilla JS
This appears to remove only a single matching entry. An array can contain multiple entries of the same value.
The question asks: "what is the very cleanest way to remove an element from a javascript array?"
9

This seems pretty clean and understandable; unlike other answers, it takes into account the possibility of an element showing up more than once.

Array.prototype.remove = function (value) {
    for (var i = 0; i < this.length; ) {
        if (this[i] === value) {
            this.splice(i, 1);
        } else {
           ++i;
        }
    }
}

In CoffeeScript:

Array::remove = (value) ->
    i = 0
    while i < @length
        if @[i] == value
            @splice i, 1
        else
            ++i
    return @
Improve this answer

Comments

4

if you are also using CoffeeScript creator's underscore.js library, here's a one-liner that will work nicely:

a = _(a).reject (v)-> v is e

or in js:

a = _(a).reject(function(v) { return v == e; });
Improve this answer

Comments

4

Although you are asking for a clean approach using Coffeescript or jQuery, I find the cleanest approach is using the vanilla javascript method filter:

array.filter(function (item) { return item !== match });

It looks cleaner in coffeescript but this translates to the exact same javascript, so I only consider it a visual difference, and not an advanced feature of coffeescript:

array.filter (item) -> item isnt match

Filter is not supported in legacy browsers, but Mozilla provides a polyfill that adheres to the ECMA standard. I think this is a perfectly safe approach because you are only bringing old browsers to modern standards, and you are not inventing any new functionality in your polyfill.

Sorry if you were specifically looking for a jQuery or Coffeescript only method, but I think you were mainly asking for a library method because you were unaware of a clean javascript only method.

There you have it, no libraries needed!

Improve this answer

1 Comment

I like this approach and reasoning.
3

This is just a slight change to Amir's awesome solution:

Array::remove = (e) -> @splice(t,1)[0] if (t = @indexOf(e)) > -1

which returns the element iff the list has it, so you can do something like:

do_something 100 if a.remove(100)

The remove coffee script translates to this javascript:

Array.prototype.remove = function(e) {
  var t, _ref;
  if ((t = this.indexOf(e)) > -1) {
    return ([].splice.apply(this, [t, t - t + 1].concat(_ref = [])), _ref);
  }};
Improve this answer

Comments

1

You might just try jQuery's grep utility:

a = [4,8,2,3]
$.grep(a,function(v){return v!=8;})

There may be a performance issue here, as you're technically causing the variable to reference a new array; you're not really modifying the original one. Assuming the original isn't referenced somewhere else, the garbage collector should take or this pretty quickly. This has never been an issue for me, but others might know better. Cheers!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.