Delete array element and shift the rest of it to the left

Question

What I'm trying to achieve is delete array element by its index and shift the rest of it to the left.

So, deleteshifting, say, 2-nd element of array ['a','b','c','d'] returns array ['a','c','d'].

I've managed to do that using following code and I'm wondering, whether there's some built-in method (or their combination) around to do that in even more concise manner.

var src = ['a', 'b', 'c', 'd'];

const delShiftLeft = (arr, index) => arr.slice(0,index).concat(arr.slice(index+1));

console.log(delShiftLeft(src,1));

Do you need to delete one value only? How do you know which values to remove? Will it always be an index, or does it depend on the value? — Frederik Wordenskjold, Feb 13 '19 at 13:28
You can use `array.splice` as noted in the answers given. However, notice that this will *mutate* your original array. If you want to return a new array, you need to have a shallow copy first: `var delShiftLeft = [...arr].splice(index, 1)`. This approach use the spread syntax to have a shallow copy, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax — ZER0, Feb 13 '19 at 13:47
Sure, that's why I said "this approach", there are more :) Actually, just `slice()` should be enough, in E5. You could also use `Array.from` (non in ES5). I just prefer the spread. Nowadays I prefer writing modern javascript since with transpilers such Babel that is not a problem anymore. Of course if transpilers are no go, that's another thing and we definitely need to fallback to older syntax / code style. — ZER0, Feb 13 '19 at 13:57
@Valtana If any of the answers have you helped you with your question, you should accept one of them. — nick zoum, Feb 13 '19 at 13:59

nick zoum · Answer 1 · 2019-02-22T23:40:38.760

You can use the handy Array.prototype.splice method. It accepts the following 3 parameters:

The index at which the item(s) should be removed from
The amount of items that should be removed (0 is a valid value)
(Optional) An array of items in case you want to add new items at that index

So for your case, you just have to do arr.splice(index, 1). Keep in mind that splice will return an array of all the removed elements, rather the changed array.

Here is an example, you can test splice with:

var original = ["a", "b", "c", "d"];

var removed = document.querySelector("#removed");
var result = document.querySelector("#result");

Object.defineProperty(this, "index", {
  get: function() {
    return +document.querySelector("#index").value;
  }
});

Object.defineProperty(this, "count", {
  get: function() {
    return +document.querySelector("#count").value;
  }
});

document.querySelector("#index").addEventListener("change", calculate);
document.querySelector("#count").addEventListener("change", calculate);

function calculate() {
  var array = original.slice(0);
  var removedArray = array.splice(index, count, "e", "f");
  removed.innerHTML = removedArray.map(toLI).join("");
  result.innerHTML = array.map(toLI).join("");
}

function toLI(text) {
  return "<li>" + text + "</li>";
}

calculate();

<input type="number" id="index" value="1" min="0" max="4">
<input type="number" id="count" value="1" min="0" max="4">
<span>Adding ["e", "f"] to list</span>
<br/>
<span>Removed: </span>
<ul id="removed"></ul>
<span>Result: </span>
<ul id="result"></ul>

Dancrumb · Accepted Answer · 2019-02-13T16:43:41.567

2

The method you're looking for is splice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

arr.splice(index, 1)

edited Feb 13 '19 at 16:43

answered Feb 13 '19 at 13:29

Dancrumb

23,732
7
60
127

score 0 · Answer 3 · answered Feb 13 '19 at 13:28

0

You can use array's filter method.

var src = ['a', 'b', 'c', 'd'];


console.log(src.filter((e,i)=> i!==1));

answered Feb 13 '19 at 13:28

Renzo Calla

6,670
2
18
35

Delete array element and shift the rest of it to the left

3 Answers3