Removing elements from JavaScript arrays

Question

I have the following array setup, i,e:

var myArray = new Array();

Using this array, I am creating a breadcrumb menu dynamically as the user adds more menu items. I am also allowing them to removing specific breadcrumb menu items by clicking on the cross alongside eatch breadcrumb menu item.

Array may hold the following data:

myArray[0] = 'MenuA';
myArray[1] = 'MenuB';
myArray[2] = 'MenuC';
myArray[3] = 'MenuD';
myArray[4] = 'MenuE';

My questions are:

a) In JavaScript, how can I remove element [1] from myArray and then recalculate indexes or is this not possible?

b) If I don't want menu option MenuB, do I need to splice it to remove it?

My problem is, if the user removes menu items as well as create news one at the end, how will the indexes to these elements be spreadout?

I just want to be able to remove items but don't know how the array indexes are handled.

Answer 1

You could use myArray.push('MenuA'); so you don't specify direct numbers when adding elements.

To remove an element I.E. 'MenuB':

// another quick way to define an array
myArray = ['MenuA', 'MenuB', 'MenuC', 'MenuD', 'MenuE']; 
// remove an item by value:
myArray.splice(myArray.indexOf('MenuB'),1);
// push a new one on
myArray.push('MenuZ');
// myArray === ["MenuA", "MenuC", "MenuD", "MenuE", "MenuZ"]

• vsync: indexOf for arrays it not supported on IE. it can be prototyped -> stackoverflow.com/questions/1744310/…
• vsync: if you use jQuery, it offers built-in indexOf for arrays -> api.jquery.com/jQuery.inArray

Answer 2

I like this implementation of Array.remove, it basically abstracts the use of the splice function:

// Array Remove - By John Resig (MIT Licensed)
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);
};

Usage:

// Remove the second item from the array
array.remove(1);
// Remove the second-to-last item from the array
array.remove(-2);
// Remove the second and third items from the array
array.remove(1,2);
// Remove the last and second-to-last items from the array
array.remove(-2,-1);

• tonyf: Thanks CMS and to the rest who replied.
• Marco Demaio: could you explian me more, plz? I don't undertand why not just using the simple splice native method to remove elements from an array.

Answer 3

http://www.w3schools.com/jsref/jsref_splice.asp

Splice should recalculate the correct indexes for future access.

Answer 4

You do not need to write a function, you can use indexOf() and splice() these two functions.

You can remove any positional element a element. For example: var name = ['james' , 'tommy' , 'Jimmy' , 'Holon']; var name = name.splice(name.indexOf('Jimmy') , 1);

Answer 5

Remove array element by position/element(Actual array modifies)

1 - arr.splice(1, 1) -----> (index, no of elements)

2 - arr.splice(arr.indexOf(5), 1) -----> (array.indexOf(InputValue), no of elements)

let arr = [1,2,3,4,5];
console.log(arr.splice(1,1)); // [2]
console.log(arr.splice(arr.indexOf(5), 1)); // [5]
console.log(arr); // [1, 3, 4]

Remove array element by position/element(creates copy array)

let arr2 = [10, 20, 30, 40]
let result = arr2.filter(a=> a!==20);
let result2 = arr2.filter(a=> a!==arr2[arr2.indexOf(30)])
console.log(result)  // [10, 30, 40]
console.log(result2) // [10, 20, 40]