You can remove only the first element found on an array in 2 main ways: by changing the original array or by returning a new array. You can also remove starting to look for the item from the end (from the right to the left).

Visit remove items from array if you wish to remove all items and not just the first occurrence

Without changing the original array

You can get a part of an array with slice, slice(start, end):

• The start is the index at which the slice starts
• The end is the index at which the slice ends (last element not included)
• It returns a copy of the selected slice of the array without changing the original array.

function removeFirstItem(arr, value) {
  const index = arr.indexOf(value);
  if (index === -1) return arr; // no value to remove
  return arr.slice(0, index).concat(arr.slice(index + 1, arr.length));
}

const x = [7, 8, 7];
removeFirstItem(x, 7); // returns [8, 7]
removeFirstItem(x, 8); // returns [7, 7]
removeFirstItem(x, 10); // returns [7, 8, 7]
console.log(x); // [7, 8, 7]

What's happening on the return statement?

• We use slice to get the array from the start until the index
• We concatenate with the slice from the index after the element we want, until the end of the array.

Changing the original array

You can change an array with splice, splice(start, deleteCount):

• The start is the index at which to start changing the array.
• The deleteCount is the number of elements to remove in the array.

function removeFirstItem(arr, value) {
  const index = arr.indexOf(value);
  if (index === -1) return arr; // no value to remove
  arr.splice(index, 1); // splice mutates (changes) array
  return arr;
}

const arr = [7, 8, 7];
removeFirstItem(arr, 7); // returns [8, 7]
removeFirstItem(arr, 10); // returns [8, 7]
console.log(arr); // [8, 7]

Remove a single item starting from the end

Let's say you have the array [1, 2, 3, 1] and you want to remove a single element starting from the end. If you want to remove item 1 the result would be [1, 2, 3].

You replace indexOf with lastIndexOf in the previous functions and it should be good to go.

function removeFirstItem(arr, value) {
  const index = arr.lastIndexOf(value);
  if (index === -1) return arr; // no value to remove
  arr.splice(index, 1);
  return arr;
}

const arr = [1, 2, 3, 1];
removeFirstItem(arr, 1); // returns [1, 2, 3]
removeFirstItem(arr, 10); // returns [1, 2, 3]
console.log(arr);

function f(arr, value) {
  const index = arr.indexOf(value);
  if (index === -1) return arr;
  return arr
    .slice(0, index)
    .concat(arr.slice(index + 1, arr.length));
}

f([6, 6, 3], 6); // A

function f(arr, value) {
  const index = arr.indexOf(value);
  if (index === -1) return arr;
  return arr
    .slice(0, index)
    .concat(arr.slice(index + 1, arr.length));
}

f([6, 6, 3], 7); // A

function f(arr, value) {
  const index = arr.indexOf(value);
  if (index === -1) return arr;
  arr.splice(index, 1);
  return arr;
}

f([4, 3, 4], 4); // A

function f(arr, value) {
  const index = arr.indexOf(value);
  if (index === -1) return arr;
  arr.splice(index, 1);
  return arr;
}

let arr = [6, 5, 6];
f(arr, 6);
console.log(arr); // A

function f(arr, value) {
  const index = arr.lastIndexOf(value);
  if (index === -1) return arr;
  arr.splice(index, 1);
  return arr;
}

let arr = [8, 5, 8];
f(arr, 8);
console.log(arr); // A

function f(arr, value) {
  const index = arr.lastIndexOf(value);
  if (index === -1) return arr;
  return arr
    .slice(0, index)
    .concat(arr.slice(index + 1, arr.length));
}
let arr = ['a', 'b', 'a'];
f(arr, 'a'); // A