During a live webinar, someone recently asked about removing an item from an array in TypeScript. There are various methods to do this. In this tutorial, I will explain how to remove an item from an array in TypeScript. We’ll discuss different approaches, such as using the splice()
, filter()
, and shift()
methods, along with practical examples.
Removing an Item Using the splice() Method
The splice()
method is very useful for removing elements from an array in TypeScript by specifying the index and the number of items to remove. It modifies the original array. Here’s an example:
const employees = ['John', 'Emma', 'Michael', 'Olivia'];
const indexToRemove = 2;
employees.splice(indexToRemove, 1);
console.log(employees); // Output: ['John', 'Emma', 'Olivia']
In this example, we have an array employees
containing the names of employees in a US-based company. We want to remove the employee at index 2, which is ‘Michael’. By using splice(indexToRemove, 1)
, we remove 1 item starting from the specified index. The updated employees
array no longer includes ‘Michael’.
You can see the exact output in the screenshot below:

Check out Get the Last Element of an Array in TypeScript
Filtering an Array to Remove Specific Items
Another approach to remove items from a TypeScript array is by using the filter()
method. This method creates a new array with elements that pass a certain condition. Let’s say we want to remove all employees whose names start with the letter ‘M’:
const employees = ['John', 'Emma', 'Michael', 'Olivia', 'Matthew'];
const filteredEmployees = employees.filter(name => !name.startsWith('M'));
console.log(filteredEmployees); // Output: ['John', 'Emma', 'Olivia']
In this example, we use filter()
with a callback function that checks if the employee’s name does not start with ‘M’ using the startsWith()
method. The resulting filteredEmployees
array contains only the names that pass this condition, effectively removing ‘Michael’ and ‘Matthew’ from the array.
Removing Multiple Items Using filter()
The filter()
method is particularly useful when you need to remove multiple items based on a specific condition in TypeScript. Let’s consider an example where we want to remove all employees whose names contain the letter ‘i’:
const employees = ['John', 'Emma', 'Michael', 'Olivia', 'Sophia'];
const filteredEmployees = employees.filter(name => !name.includes('i'));
console.log(filteredEmployees); // Output: ['John', 'Emma']
Here, we use filter()
with a callback function that checks if the employee’s name does not include the letter ‘i’ using the includes()
method. The resulting filteredEmployees
array only contains ‘John’ and ‘Emma’, as the other names contained the letter ‘i’ and were removed.
Here is the exact output in the screenshot below:

Read Get the First Element of an Array in TypeScript
Removing the First Item Using shift()
If you need to remove the first item from an array, you can use the shift()
method. It removes the element at index 0 and returns the removed item. Here’s an example:
const queue = ['Alice', 'Bob', 'Charlie'];
const removedPerson = queue.shift();
console.log(removedPerson); // Output: 'Alice'
console.log(queue); // Output: ['Bob', 'Charlie']
In this scenario, we have a queue
array representing people waiting in line. By using shift()
, we remove the first person (‘Alice’) from the queue and store it in the removedPerson
variable. The updated queue
array now contains [‘Bob’, ‘Charlie’].
Removing the Last Item Using pop()
Similar to shift()
, the pop()
method removes the last item from an array and returns it. Here’s an example:
const stack = ['Book1', 'Book2', 'Book3'];
const removedBook = stack.pop();
console.log(removedBook); // Output: 'Book3'
console.log(stack); // Output: ['Book1', 'Book2']
In this example, we have a stack
array representing a stack of books. By using pop()
, we remove the last book (‘Book3’) from the stack and store it in the removedBook
variable. The updated stack
array now contains [‘Book1’, ‘Book2’].
Read Check if an Array is Null or Empty in TypeScript
Removing Items Using the delete Operator
Another way to remove an item from an array is by using the delete
operator in TypeScript. It removes the element at the specified index, but it leaves an empty slot in the array. Here’s an example:
const fruits = ['Apple', 'Banana', 'Orange'];
delete fruits[1];
console.log(fruits); // Output: ['Apple', undefined, 'Orange']
console.log(fruits.length); // Output: 3
In this example, we have a fruits
array containing different fruit names. By using delete fruits[1]
, we remove the element at index 1 (‘Banana’). However, the fruits
array still has a length of 3, with an undefined value at index 1. This approach is not recommended if you want to maintain a contiguous array without empty slots.
Conclusion
In this tutorial, I have explained various methods to remove items from an array in TypeScript. We learned how to use splice()
to remove elements by specifying the index and count, filter()
to create a new array based on a condition, shift()
to remove the first item, pop()
to remove the last item, and the delete
operator to remove an item by index.
If you need to remove elements based on their indices or modify the original array, splice()
is a good choice. If you want to create a new array with filtered elements, filter()
is the way to go. For removing the first or last item, shift()
and pop()
are handy methods. Avoid using the delete
operator if you want to maintain a contiguous array without empty slots.
Does this tutorial help you?
You may also like:
- Remove Empty Strings from an Array in TypeScript
- Check if an Array is Not Empty in TypeScript
- Create and Use an Empty String Array in TypeScript
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.