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.

score 30 · Answer 1 · answered Aug 13 '09 at 23:22

30

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

answered Aug 13 '09 at 23:22

gnarf

105,192
25
127
161

3

indexOf for arrays it not supported on IE. it can be prototyped -> http://stackoverflow.com/questions/1744310/how-to-fix-array-indexof-in-javascript-for-ie-browsers – vsync May 04 '10 at 12:17
if you use jQuery, it offers built-in indexOf for arrays -> http://api.jquery.com/jQuery.inArray/ – vsync May 04 '10 at 12:20

score 20 · Accepted Answer · answered Aug 13 '09 at 23:25

20

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

answered Aug 13 '09 at 23:25

Christian C. Salvadó

807,428
183
922
838

Thanks CMS and to the rest who replied. – tonyf Aug 14 '09 at 01:27
3

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. – Marco Demaio Oct 20 '10 at 15:53

score 3 · Answer 3 · answered Aug 13 '09 at 23:20

3

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

Splice should recalculate the correct indexes for future access.

answered Aug 13 '09 at 23:20

Cullen Walsh

4,318
1
17
12

score 0 · Answer 4 · answered Jun 27 '15 at 08:26

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

akhtarvahid · Answer 5 · 2019-08-08T11:34:42.273

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]

Removing elements from JavaScript arrays

5 Answers5

Linked