"Using" the delete operator

When you delete an array element using the delete operator, the array length is not affected. For example if you delete arr[2], arr[3] is still arr[3] and arr[2] is undefined.

arr = ['a', 'b', 'c', 'd']  
// ["a", "b", "c", "d"]
delete arr[2]  
// true
arr  
// ["a", "b", undefined, "d"]

Using the splice method

One technique for removing content is to use the splice method to rebuild the array (adding new elements while removing old elements).

arr = ['a', 'b', 'c', 'd']  
// ["a", "b", "c", "d"]
arr.splice(2, 1)  
// ["c"]
arr  
// ["a", "b", "d"]

Extending the Array prototype

Another technique John Resig came up with extends the native prototype for the Array constructor by adding a remove method.

Array.prototype.remove = function(from, to) {  
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

// Remove the second item from the array
arr = ['a', 'b', 'c', 'd']  
// arr = ['a', 'b', 'c', 'd']
arr.remove(2);  
// 3
arr  
// ["a", "b", "d"]

// Remove the second-to-last item from the array
arr = ['a', 'b', 'c', 'd']  
// arr = ['a', 'b', 'c', 'd']
arr.remove(-2);  
// 3
arr  
// ["a", "b", "d"]

// Remove the second and third items from the array
arr = ['a', 'b', 'c', 'd']  
// arr = ['a', 'b', 'c', 'd']
arr.remove(1,2);  
// 2
arr  
// ["a", "d"]

// Remove the last and second-to-last items from the array
arr = ['a', 'b', 'c', 'd']  
// arr = ['a', 'b', 'c', 'd']
arr.remove(-2,-1);  
// 2
arr  
// ["a", "b"]

jQuery's grep method

And finally, a jQuery technique that uses the grep method and removes an array item based on it's string value instead of index.

arr = ['a', 'b', 'c', 'd']  
// ["a", "b", "c", "d"]
arr = $.grep(arr, function(value) { return value != 'c'; });  
// ["a", "b", "d"]

© 2023. All Rights Reserved.

Published with Ghost, themed with Ghostium.