Sling Academy
Home/JavaScript/JavaScript: Remove all occurrences of a value from an array

JavaScript: Remove all occurrences of a value from an array

Last updated: March 17, 2023

When working with JavaScript arrays, there might be cases where you need to delete all elements that match a particular value and leave behind only the elements that do not match that value. This concise, practical article shows you a couple of different ways to achieve this goal.

Using the filter() method

This approach is short and elegant. It is a kind of single-line solution. In the following example, we’re going to remove all occurrences of 2 from a given array named arr:

const arr = [2, 3, 4, 2, 1, 9, 8, 2, 3, 2, -2, 0];
const val = 2;

let newArr = arr.filter((element) => element !== val);
console.log(newArr);

Output:

[3, 4, 1, 9, 8, 3, -2, 0]

Using the splice() method

We can also use the splice() method in combination with a for loop to get the job done.

Example:

const arr = [2, 3, 4, 2, 1, 9, 8, 2, 3, 2, -2, 0];
const val = 2;

for (let i = 0; i < arr.length; i++) {
  if (arr[i] === val) {
    // Remove one element at index i
    arr.splice(i, 1);
    // Decrement i to avoid skipping elements
    i--;
  }
}
console.log(arr);

Output:

[3, 4, 1, 9, 8, 3, -2, 0]

Instead of a for loop, we can use a while loop and the indexOf() method to find and remove the value from the array until it is not found:

const arr = [2, 3, 4, 2, 1, 9, 8, 2, 3, 2, -2, 0];
const val = 2;

// Find the first index of val
let index = arr.indexOf(val);

while (index !== -1) {
  // While val is found in the array
  // Remove one element at index
  arr.splice(index, 1);

  // Find the next index of val
  index = arr.indexOf(val);
}
console.log(arr);

The result will be the same. However, this code is more verbose and less efficient.

Next Article: JavaScript: How to iterate through 2 arrays in parallel

Previous Article: 3 Ways to Shuffle an Array in JavaScript

Series: Working with Arrays in JavaScript

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration