Removing a Specific Element by Value

  • To remove an element from an array based on the value in JavaScript is to find index number of that value in an array using indexOf() function and then delete particular index value using the splice() function.

Example 1:

[pastacode lang=”javascript” manual=”%3Cscript%20type%3D%22text%2FJavaScript%22%3E%0A%20%0A%20%20%20%20var%20arr%20%3D%20%5B10%2C%2025%2C%20120%2C%20220%2C%20660%5D%3B%0A%20%20%20%20var%20index%20%3D%20arr.indexOf(220)%3B%0A%20%0A%20%20%20%20if%20(index%20%3E%20-1)%20%0A%7B%0A%20%20%20%20%20%20%20arr.splice(index%2C%201)%3B%0A%7D%0A%20%0A%3C%2Fscript%3E%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]
  • We have initialized an array named arr with few static values.
  • Now we can use indexOf() function to find the index number of given value in array.
  • If given value found in array , it will return index number, else it will remove values less than 0.
  • First check if return index number is >=0, then only delete the value from that index from array using splice() function.

Removing One Element Using splice()

  • The splice() method is a useful way of removing, replacing, and/or adding elements in an array.
  • similarly to works with splice() functions in other languages.
  • We are take an array and selectively remove portions of it (aka “splice”).
  • The inputs to the splice() function are the index point to start at and the number of elements to remove.
  • Also, remember that arrays are zero-indexed in JavaScript.
[ad type=”banner”]

To remove one element from a specific index in an array:

[pastacode lang=”javascript” manual=”%5B%E2%80%9Dwiki%22%2C%20%E2%80%9Dtechy%22%2C%20%E2%80%9Dwikitechy%22%2C%20%E2%80%9Dfoo%22%5D%0A%20%0Alist.splice(2%2C%201)%0A%2F%2F%20Starting%20at%20index%20position%202%2C%20remove%20one%20element%0A%5B%22%20wiki%22%2C%20%22%20techy%22%2C%20%22%20foo%22%5D%0A%20%0Alist.splice(2%2C2)%0A%2F%2F%20Starting%20at%20index%20position%202%2C%20remove%20two%20elements%0A%5B%22%20wiki%22%2C%20%22%20techy%22%5D%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]
  • The splice() call will return any removed elements, so we know what was actually removed.

Removing a Range of Elements Using splice()

  • To remove several consecutive elements from an array:
[pastacode lang=”javascript” manual=”%5B%E2%80%9Dwiki%22%2C%20%E2%80%9Dtechy%22%2C%20%E2%80%9Dwikitechy%22%2C%20%E2%80%9Dfoo%22%5D%0A%20%0Alist.splice(0%2C%202)%0A%2F%2F%20Starting%20at%20index%20position%200%2C%20remove%20two%20elements%20%20%0A%5B%E2%80%9Dwikitechy%22%2C%20%E2%80%9Dfoo%22%5D%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]

Removing One Element Using pop()

  • The array methods of push() and pop() work on the the end of an array.
  • In terms of push() and pop() come from the idea of a stack in memory from microprocessors.
  • This implements the idea of a Last-In-First-Out data structure (LIFO).
  • The push() method will ADD an element to the array and the pop() method will remove one.

Here the example is remove the last element of an array:

[pastacode lang=”javascript” manual=”%5B%E2%80%9Dwiki%22%2C%20%E2%80%9Dtechy%22%2C%20%E2%80%9Dwikitechy%22%2C%20%E2%80%9Dfoo%22%5D%0A%20%0Alist.pop()%0A%5B%E2%80%9Dwiki%22%2C%20%E2%80%9Dtechy%22%2C%20%E2%80%9Dwikitechy%E2%80%9D%5D%0A” message=”javascript code” highlight=”” provider=”manual”/]

Removing One Element Using shift()

  • The array methods shift() and unshift() work on the beginning of an array instead of the end of an array, as is the case with push() and pop().
  • The shift() command will remove the first element of the array and the unshift() command will add an element to the beginning of the array.

The below example is remove the first element of an array:

[pastacode lang=”javascript” manual=”%5B%E2%80%9Dwiki%22%2C%20%E2%80%9Dtechy%22%2C%20%E2%80%9Dwikitechy%22%2C%20%E2%80%9Dfoo%22%5D%0A%20%0Alist.shift()%0A%5B%E2%80%9Dtechy%22%2C%20%E2%80%9Dwikitechy%22%2C%20%E2%80%9Dfoo%22%5D%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]

Removing Multiple Specific Elements

  • Let’s add an extra “wikitechy”element to our array, and then remove all occurrences of “wikitechy
[pastacode lang=”javascript” manual=”%5B%E2%80%9Dwiki%22%2C%20%E2%80%9Dtechy%22%2C%20%E2%80%9Dwikitechy%22%2C%20%E2%80%9Dwikitechy%22%2C%20%E2%80%9Dfoo%22%5D%0A%20%0Afor(%C2%A0var%C2%A0i%C2%A0%3D%C2%A0list.length-1%3B%C2%A0i–%3B)%0A%7B%0Aif%C2%A0(%C2%A0list%5Bi%5D%C2%A0%3D%3D%3D%C2%A0%20%E2%80%98wikitechy%E2%80%99)%C2%A0list.splice(i%2C%C2%A01)%3B%0A%7D%0A%C2%A0%0A%5B%E2%80%9Dwiki%22%2C%20%E2%80%9Dtechy%22%2C%20%E2%80%9Dfoo%22%5D%0A” message=”javascript code” highlight=”” provider=”manual”/] [ad type=”banner”]

Note:

  • To use the filter() method for this operation, but that would have created a new array, as filter() does not mutate the array.
  • If you need to do a lot of filtering, using the filter() method might clean up your code quite a bit

Categorized in: