Treehouse

Remove an Item From an Array with JavaScript

By on  

One operation that seems to be more difficult than it should be in every programming language is removing a value from an array.  It's such an easy concept mentally that it skews our programmatic view of the task.  In JavaScript the splice method is of huge help in removing an item from an array.

JavaScript Splice

One splice coupled with an indexOf removes the item from an array:

// Start with an initial array
var array = ["a", "b", "c"];

// Find and remove item from an array
var i = array.indexOf("b");
if(i != -1) {
	array.splice(i, 1);
}

Of course if you'd like to remove multiple occurrences of the same string/number, you'll need add a bit more logic:

for(var i = array.length-1; i--;){
	if (array[i] === "b") array.splice(i, 1);
}

You may be thinking that the filter method would work...

array.filter(function(i) {
	return i != "b"
});

...but that will return a new array, thus not modifying the original.

Removing a given value from an array isn't too difficult of a task when you have a reliable snippet nearby!

ydkjs-3.png

Recent Features

  • Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native...

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things...

Incredible Demos

  • Generate Dojo GFX Drawings from SVG Files

    One of the most awesome parts of the Dojo / Dijit / DojoX family is the amazing GFX library.  GFX lives within the dojox.gfx namespace and provides the foundation of Dojo's charting, drawing, and sketch libraries.  GFX allows you...

  • Introducing MooTools ScrollSide

    This post is a proof of concept post -- the functionality is yet to be perfected. Picture this: you've found yourself on a website that uses horizontal scrolling instead of vertical scrolling. It's an artistic site so you accept that...

  • MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems...

Discussion

  1. It’s important to note that splicing an array is an incredibly slow operation and is very difficult or impossible for engines to optimize. If you have performance sensitive uses of collections of items that need to be mutated at arbitrary points then you’ll likely want to look into alternative data structure implementations. Two new ones being introduced as base language features in ES6 are Map and Set, which force uniqueness but also allow for linear time item deletions. While these features only exist in Spidermonkey and V8 behind a flag, there are shims available and they will eventually be in all engines.

    • Awesome tip Brandon, thank you!

    • Oops, quick correction. That’s *constant* time, not *linear* time.

  2. Steve Fink

    nit: you start out looking past the end of the array. I think you want array.length-1.

    I haven’t benchmarked, but if you’re expecting to remove a lot of elements, it might be faster to do something like:

    for (var i = 0, j = 0; i < array.length; i++) {
    if (array[i] != "b")
    array[j++] = array[i];
    }
    array.length = j;

    • MaxArt

      I don’t know how much is “a lot” of elements, but your code (although nice) doesn’t seem to be very fast… At least, not faster than .splice:
      http://jsperf.com/removing-items-from-array
      In this case I’m just trying to remove 10% of the elements, maybe with a higher ratio the scenario would be different.

    • David

      @MaxArt: Your code has a little mistake: Instead of checking for b!==5, your should check for b[i]!==5. Otherwise, you just get “Array” for b, which is always false. Without this little mistake, Steve’s code is way faster.

    • I’m quite surprised by those results, Steve’s version should be faster than shifting all elements back one index each splice. I guess splice must have a clever implementation in the other browsers and Firefox 21 just has a beast JS interpreter :P

  3. indexOf doesn’t work on array in IE :(

    • MaxArt

      It does in IE9+.
      For IE8- there are common shims, but I guess you already know that.

  4. Al Jey

    Even though filter does in fact return a new array, it is a much more efficient way to get rid of multiple items at once than a several calls to splice, and as such should be preferred.

  5. Hey everyone, I’m new to contributing but stoked on javascript and the open source community so here I go.

    If you’re not concerned about keeping the array organized I came up with this which is blazing fast in comparison:
    if (i > 0)
    callbacks[i] = callbacks[0];
    callbacks.shift();

    Otherwise you will need to run a loop to shift all elements after the one you want to remove -1 index which depending on the size of the array could get ridiculous but in the majority of case would still crush splice.

    Let me know what you think or send me an email. I’m just getting started on Git to get more involved.

    • I was curious about your technique so I built a jsPerf test around it. Unfortunately, it appears array.splice still performs better than the method you described.

      http://jsperf.com/array-splice-vs-reassign-and-shift

      It was certainly a good idea and comes close to splice (except in FF), but since it destroys the ordering of the array, adds an extra line of code, and still doesn’t match splice, I’d recommend sticking with splice.

      I haven’t looked into the browser implementation code for splice. Maybe that’s something you would want to do to find if you can help optimize it further; otherwise, it might help you understand how arrays work behind-the-scenes.

  6. Hello David,
    I am new to java script and starting to learn about arrays. I understand pop and push. I would like to know how to use the splice code snippet you have posted. How would I use the splice code in my java script file?

    // tasks.js #2
    // This script manages a to-do list.
    
    // Need a global variable:
    var tasks = []; 
    
    // Function called when the form is submitted.
    // Function adds a task to the global array.
    function addTask() {
        'use strict';
    
        // Get the task:
        var task = document.getElementById('task');
    
        // Reference to where the output goes:
        var output = document.getElementById('output');
        
        // For the output:
        var message = '';
    
        if (task.value) {
        
            // Add the item to the array:
            tasks.push(task.value);
            
            // Update the page:
            message = 'To-Do';
            for (var i = 0, count = tasks.length; i < count; i++) {
                message += '' + tasks[i] + '';
            }
            message += '';
            output.innerHTML = message;
            
        } // End of task.value IF.
    
        // Return false to prevent submission:
        return false;
        
    } // End of addTask() function.
    
    // Initial setup:
    function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = addTask;
    } // End of init() function.
    window.onload = init;
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Use Code Editor