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.

gnarf · Accepted Answer · 2009-08-13 23:22:35Z

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, 2009 at 23:22

gnarf

107k26 gold badges129 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vsync Over a year ago

indexOf for arrays it not supported on IE. it can be prototyped -> stackoverflow.com/questions/1744310/…

vsync Over a year ago

if you use jQuery, it offers built-in indexOf for arrays -> api.jquery.com/jQuery.inArray

Christian C. Salvadó · Accepted Answer · 2009-08-13 23:25:02Z

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, 2009 at 23:25

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

2 Comments

tonyf Over a year ago

Thanks CMS and to the rest who replied.

Marco Demaio Over a year ago

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.

Cullen Walsh · Accepted Answer · 2009-08-13 23:20:18Z

3

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

Splice should recalculate the correct indexes for future access.

answered Aug 13, 2009 at 23:20

Cullen Walsh

4,3981 gold badge19 silver badges13 bronze badges

Comments

jamesxu-e.g. · Accepted Answer · 2015-06-27 08:26:29Z

0

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

answered Jun 27, 2015 at 8:26

jamesxu-e.g.

6502 gold badges10 silver badges23 bronze badges

Comments

akhtarvahid · Accepted Answer · 2019-08-08 11:34:42Z

0

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]

edited Aug 8, 2019 at 11:34

answered Aug 8, 2019 at 9:01

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

Removing elements from JavaScript arrays

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related