CODEWITHSUNDEEP
javascript
tonyf
tonyf

Reputation: 35587

Removing elements from JavaScript arrays

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.

Upvotes: 4

Views: 40144

Answers (5)

akhtarvahid
akhtarvahid

Reputation: 9779

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]

Upvotes: 0

jamesxu-e.g.
jamesxu-e.g.

Reputation: 650

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

Upvotes: 0

Christian C. Salvadó
Christian C. Salvadó

Reputation: 827992

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

Upvotes: 20

gnarf
gnarf

Reputation: 106402

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

Upvotes: 30

Cullen Walsh
Cullen Walsh

Reputation: 4388

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

Splice should recalculate the correct indexes for future access.

Upvotes: 3

Related Questions