Remove first Item of the array (like popping from stack)

Question

I have list of items created via ng-repeat. I also have Delete button. Clicking delete button removes last item of the array one by one. Plunker

But I want to remove items one by one starting from the first item. How can I do that? I used this for removing list Items:

  $scope.index = 1;
  $scope.remove = function(item) { 
    var index = $scope.cards.indexOf(item);
    $scope.cards.splice(index, 1);     
  }

Is there any way I can remove from the top?

http://stackoverflow.com/questions/2003815/how-to-remove-first-element-of-an-array-in-javascript — user2952238, Apr 13 '15 at 12:59

score 482 · Accepted Answer · edited Dec 12 '18 at 10:58

482

The easiest way is using shift(). If you have an array, the shift function shifts everything to the left.

var arr = [1, 2, 3, 4]; 
var theRemovedElement = arr.shift(); // theRemovedElement == 1
console.log(arr); // [2, 3, 4]

edited Dec 12 '18 at 10:58

luk2302

55,258
23
97
137

answered Apr 13 '15 at 13:01

Thalsan

5,140
1
11
12

11

If you need to iterate through the whole array and remove one element at a time until the array is empty, I recommend reversing the array first and then using `pop()` instead of `shift()` as `pop()` is faster `shift()`. See https://stackoverflow.com/questions/6501160/why-is-pop-faster-than-shift – Alexander Jank Jul 06 '18 at 19:27
1

upvoted! lets say I want to keep an array with 1000 elements at any point in time and I keep adding new data every second or so, how efficient is shift in such a scenario – PirateApp Nov 29 '18 at 05:55
@AlexanderJank But that doesn't work if the array is `[1,2,3,a,b,c]` – Dr.jacky Dec 23 '21 at 12:55

score 121 · Answer 2 · edited Nov 02 '17 at 13:25

121

Just use arr.slice(startingIndex, endingIndex).

If you do not specify the endingIndex, it returns all the items starting from the index provided.

In your case arr=arr.slice(1).

edited Nov 02 '17 at 13:25

Outside_Box

447
1
4
16

answered May 10 '17 at 12:55

Muhammad Danial Iqbal

1,546
1
9
10

29

I prefer this `slice()` because `slice()` isn't invasive and doesn't change the value itself unlike `shift()` or `splice()`. Cf. var a = [1, 2, 3] var b = a.shift() a //(2) [2, 3] b //1 – lamusique Jul 15 '17 at 10:38
1

both methods have different use cases. – Vaibhav Vishal Aug 15 '19 at 15:51
1

Another advantage is chaining: [1, 2, 3].slice(1).doSomethingWithTwoAndThree() – Harps Sep 28 '21 at 09:38
2

Perfect. .shift() did not work for map(), slice did. :D – Gogol Feb 12 '22 at 20:56

Jo VdB · Answer 3 · 2018-10-19T12:41:48.033

61

const a = [1, 2, 3]; // -> [2, 3]

// Mutable solutions: update array 'a', 'c' will contain the removed item
const c = a.shift(); // prefered mutable way
const [c] = a.splice(0, 1);

// Immutable solutions: create new array 'b' and leave array 'a' untouched
const b = a.slice(1); // prefered immutable way
const b = a.filter((_, i) => i > 0);
const [c, ...b] = a; // c: the removed item

edited Oct 19 '18 at 12:41

answered Apr 18 '18 at 19:44

Jo VdB

2,016
18
16

score 11 · Answer 4 · answered Apr 13 '15 at 13:05

11

Plunker

$scope.remove = function(item) { 
    $scope.cards.splice(0, 1);     
  }

Made changes to .. now it will remove from the top

answered Apr 13 '15 at 13:05

Kushal

1,360
6
16

Thanks for pointing this out this. if starting point is 0 then it starts from top – Raihan Apr 13 '15 at 13:14

score 5 · Answer 5 · edited Nov 29 '17 at 08:10

5

There is a function called shift(). It will remove the first element of your array.

There is some good documentation and examples.

edited Nov 29 '17 at 08:10

hoijui

3,615
2
33
41

answered Apr 13 '15 at 14:05

Hazarapet Tunanyan

2,809
26
30

Remove first Item of the array (like popping from stack)

5 Answers5

Linked

Related