Clean way to remove element from javascript array (with jQuery, coffeescript)

Question

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.

Answer 1

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;
};

Answer 2

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);

Answer 3

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.

Answer 4

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 @

Answer 5

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!

Answer 6

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; });

Answer 7

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);
  }};

Answer 8

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!