How to Remove Element from Array in TypeScript

Use array removal in TypeScript when a list needs to drop one item by value, index, or condition. This is perfect for todo apps, cart items, selected filters, and state updates.

What you’ll build or solve

You’ll learn how to remove elements from arrays in TypeScript using filter(), splice(), and index-based patterns. You’ll also know when immutable updates are safer.

When this approach works best

This approach is the right choice when arrays need dynamic updates.

Common real-world scenarios include:

• Removing a todo
• Deleting a cart item
• Clearing selected tags
• Removing invalid records
• State list updates

This is a bad idea when the original array must stay untouched and the wrong method mutates it.

Prerequisites

You only need:

• Basic TypeScript arrays
• Familiarity with array methods
• Understanding of mutation vs immutability

Step-by-step instructions

Step 1: Remove by condition with filter()

The safest default is filter().

const users: string[] = ["Alex", "Sam", "Jordan"];

const updatedUsers = users.filter((user) => user !== "Sam");

This returns a new array without mutating the original.

It is the best choice for React state and predictable updates.

Step 2: Remove by index with splice()

If mutation is acceptable, use splice().

const scores: number[] = [95, 88, 76];

scores.splice(1, 1);

This removes one item at index 1.

The original array changes directly.

Step 3: Remove the first matching value by index

Combine indexOf() and splice().

const tags = ["react", "typescript", "seo"];
const index = tags.indexOf("typescript");

if (index !== -1) {
  tags.splice(index, 1);
}

This is useful when only the first match should be removed.

What to look for:

• filter() is immutable
• splice() mutates the original array
• Great for value or index removal
• Prefer immutable updates in UI state
• Keep array types unchanged

Examples you can copy

Remove by value

const active = items.filter((item) => item !== "archived");

Remove by index

items.splice(2, 1);

Remove invalid scores

const valid = scores.filter((score) => score >= 0);

Common mistakes and how to fix them

Mistake 1: Using splice() in immutable state logic

What the reader might do:

Mutate a React state array directly.

Why it breaks: React may miss the change.

Corrected approach:

Use filter().

Mistake 2: Forgetting indexOf() can return -1

What the reader might do:

items.splice(index, 1);

without checking.

Why it breaks: -1 removes the last item.

Corrected approach:

Check for -1 first.

Mistake 3: Removing multiple duplicates unintentionally

What the reader might do:

Use filter() when only one match should be removed.

Why it breaks: every matching item disappears.

Corrected approach:

Use index-based removal for single matches.

Troubleshooting

If the wrong item disappears, check indexOf() results.

If React state does not rerender, stop mutating arrays directly.

If duplicates vanish unexpectedly, choose index-based removal.

If the original array should stay intact, use filter().

Quick recap

• Use filter() for immutable removal
• Use splice() for direct mutation
• Check indexOf() against -1
• Prefer immutable updates in UI state
• Pick value vs index removal intentionally