Skip to main content
deleted 30 characters in body
Source Link
Dharman
  • 33.9k
  • 27
  • 106
  • 157

Edited on 2016 October

Edited on 2016 October

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 ] 

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 ]

let value = 3 let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => item !== value) console.log(arr) // [ 1, 2, 4, 5 ] 

let value = 3 let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => item !== value) console.log(arr) // [ 1, 2, 4, 5 ]

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 ]
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 ] 
 

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 ]
// 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 ] 
 

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 ] 
let value = 3 let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => item !== value) console.log(arr) // [ 1, 2, 4, 5 ] 

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 ] 

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 ] 

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 ]

let value = 3 let arr = [1, 2, 3, 4, 5, 3] arr = arr.filter(item => item !== value) console.log(arr) // [ 1, 2, 4, 5 ]

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 ]
 

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 ]
 

Put in a caveat since performance of .filter and removing in-place is very different with large arrays.
Source Link
Caveman
  • 3k
  • 1
  • 22
  • 20

Be mindful though, creating a new array every time takes a big performance hit. If the list is very large (think 10k+ items) then consider using other methods.

Be mindful though, creating a new array every time takes a big performance hit. If the list is very large (think 10k+ items) then consider using other methods.

Replaced MDN polyfill links with core-js link because MDN just links to that now
Source Link
Loading
reduced "screaming"
Source Link
ashleedawg
  • 21.9k
  • 9
  • 82
  • 120
Loading
Active reading [<https://en.wiktionary.org/wiki/October#Proper_noun>]. Expanded, etc.
Source Link
Peter Mortensen
  • 31.4k
  • 22
  • 110
  • 134
Loading
Avoid false information about This-Binding Syntax. It's not part of ES, it's just a proposal
Source Link
fregante
  • 32.4k
  • 17
  • 133
  • 175
Loading
Specified correct EcmaScript version for "Removing multiple items" section
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
added virtual method example
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
minor fixes in text
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
more explanation about new functions and syntax support. indexOf replaced with includes function. ES6 name replaced with ES2016
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
Added example for future JavaScript syntax
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
Added more real-life example of removing multiple array items
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
copyedit. also, let's make the array built out of letters rather than numbers -- this clarifies the examples looking at indices, not item contents. ("why is it [1,2] not [1,4] if we're filtering out 2 and 3?" i thought to myself at first.)
Source Link
doppelgreener
  • 5.2k
  • 10
  • 48
  • 67
Loading
Make code much simpler and clear
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
added ECMAScript 2015 code example
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
Added code comments. Added prefix to function name, to prevent collision.
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
Copy edited.
Source Link
Peter Mortensen
  • 31.4k
  • 22
  • 110
  • 134
Loading
Added a third option for cases when good performance is required.
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
added 607 characters in body
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading
Source Link
ujeenator
  • 28.9k
  • 2
  • 27
  • 28
Loading