How to Remove Element from an Array: JavaScript

Removing elements from a JavaScript array is a common programming paradigm that developers often run into. As with a lot of things JavaScript, this isn’t as simple as it probably should be. There are actually several ways to remove one or more elements from an array so let’s go through each of them one by one.

Removing One Element Using splice():

The splice() method is a versatile way of removing, replacing, and/or adding elements in an array. It works similarly to splice() functions in other languages. Basically, you take an array and selectively remove portions of it. 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.

["AA", "AB", "AC", "AD"]                                                                                                             list.splice(2, 1)                                                                                                                                   // Starting at index position 2, remove one element                                                                                 ["AA", "AB", "AD"]                                                                                                                    list.splice(2,2)                                                                                                                                   // Starting at index position 2, remove two elements                                                                                           output: ["AA", "AB"]

Removing One Element Using pop():

The array methods push() and pop() work on the the end of an array. The terms push() and pop() come from the idea of a stack and queue. 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. To remove the last element of an array:

["AA", "AB", "AC", "AD"]                                                                                                                    list.pop()                                                                                                                                    output: ["AA", "AB", "AC"]

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.

["AA", "AB", "AC", "AD"]                                                                                                                  list.shift()                                                                                                                                  output: ["AB", "AC", "AD"]

Searching and Removing a Specific Element by Value:

The indexOf() command returns the first index at which a given element can be found in the array, or -1 if it is not present. This can be used along with splice() to search for an element and then remove it, even if you don’t know where it is in the array.

Let’s remove the "AC" element:

["AA", "AB", "AC", "AD"]                                                                                         list.splice( list.indexOf('AC'), 1 );                                                                                                               // Find the index position of "AC," then remove one element from that position                                                                 output: ["AA", "AB", "AD"]

Removing Multiple Specific Elements

Let’s add an extra "AC" element to our array, and then remove all occurrences of "AC":

["AA", "AB", "AC", "AC", "AD"]                                                                                               for( var i = list.length-1; i--;){                                                                          if ( list[i] === 'AC') list.splice(i, 1);}                                                                                                    output: ["AA", "AB", "AD"]

Note that we could also have used the filter()method for this operation, but that would have created a new array, as filter() does not mutate the array on which it is called. Perform a lot of filtering using the filter() method might clean up your code quite a bit.



Was this article helpful?

Top Related Jobs

Top Freelance jobs are waiting for you, View & apply to earn more.

  • LearnDash Video Progression

    $250, Fixed | Australia
    I'm looking for someone who is knowledgeable on LearnDash to setup course progression in our website courses. Our website course is fully functional....
  • Custom decorated apparel website.

    $24, Hourly | United States
    I'm looking to get a website (removed by Toogit admin) I don't know if there is a better template for this project, but I'd like our website to have a...
  • Developer needed to create conversional WordPress website

    $1,000, Fixed | Australia
    I'm looking to work with a web developer who is well-versed in what makes a website conversional. I need someone who can create multiple touch points...
  • Senior React.js + React Native + Redux frontend developer

    $1,500, Fixed | United States
    If you are an agency, work through an agency or need to be paid hourly, please ignore this job posting. It is not suitable for you.TI will share a doc...
  • CBD e-commerce website

    $200, Fixed | United States
    In need of a fully functionally working, beautifully created modern design of a Cbd e-commerce website. Currently using hostgator cpanel with Wordpres...
  • Install Vue Storefront for Magento

    $14, Hourly | Mexico
    Install Vue Storefront for our Magento site. We have installed a marketplace plugin so you will need to integrate those API too.
  • Java Developer

    $18, Hourly | India
    Java/Rest API/SpringBoot engineering to build a new framework for testing needs.They should be hands-on in building Rest API, strong coding skills.
  • Wordpress Developer - Manchester located - Contract

    $100, Fixed | France
    Looking for a contract Wordpress developer for a 2 month contract.Manchester, uk location.Looking to change a Wordpress site to a subscription mode, m...


People also searched for

 
Learn Web Scraping using Python
Web Development

The importance of extracting information from the web is becoming increasingly loud and clear. Every few weeks, I realize myself in a situation where we need to extract information...

Read More
Natural Language Processing in Python
Natural Language Processing in Python
Web Development

NLP is a branch of data science that consists of systematic processes for analyzing, understanding, and deriving information from the text information in a smart and efficient mann...

Read More
How to post a Job & Hire a great WordPress developer
How to post a Job & Hire a great WordPress develop...
Web Development

WordPress is an open source Content Management System (CMS), which allows the users to build dynamic websites and blog. WordPress is the most popular blogging system on the web and...

Read More

You are freelancing Ninja?

Try Toogit Instant Connect today, The new virtual assistant for your freelancing world.


What our users are discussing about javascript