801

I have an array that I've created in TypeScript and it has a property that I use as a key. If I have that key, how can I remove an item from it?

Improve this question
1
  • 1
    Would be nice if they would add a .remove() method where you could simply pass in the value you want removed. I guess that would be too easy... Commented Dec 12, 2023 at 22:04

20 Answers 20

Reset to default
1134

Same way as you would in JavaScript. 

delete myArray[key];

Note that this sets the element to undefined.

Better to use the Array.prototype.splice function:

const index = myArray.indexOf(key, 0);
if (index > -1) {
   myArray.splice(index, 1);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

You can add a type to that! var index: number = myArray.indexOf(key, 0);
@CorayThan Surely it would be implicitly typed as indexOf returns a number?
@Chris While it's obvious in this simple case, it can help you diagnose bugs faster if you define a type for every variable explicitly. You're using index in more than once place already and one of those places (splice) wants to see a number or you'll get an error. Currently the compiler can't prevent you making mistakes there.
@blorkfish it's good to mention that if you have a list of objects, you can use var index = myArray.findIndex(x => x.prop==key.prop);.
@Cirelli94 - you're responding to an older thread, but the answer to your question is that deleting an array element does not change its length or re-index the array. Because arrays are objects in JavaScript, delete myArr[2] literally deletes the property 2 of myArr, which is also different than myArr[2] = undefined. The moral of this story is to just use splice for this task because it is a safe way to get the desired effect without confusing side effects.
|
394 
let foo_object; // Itemitem(object here) to remove
this.foo_objects = this.foo_objects.filter(obj => return obj !== foo_object);
Improve this answer

13 Comments

This does not remove anything it simply filters. If the list actually needs to be modified this is not the way.
@user573434 yes, you are right, as the name indicate. But this is simple approach in case where you want to remove an object on successful delete api call etc.
This worked perfectly for me on an array of objects without a unique key property. @user573434 the filter method returns a new array without the filtered object, so the resulting array does have the object removed.
i think in order to return it as an object you have to do this this.foo_objects = this.foo_objects.filter(obj => obj !== foo_object)[0];
this doesn't modify the original array, it creates a new one
|
150

With ES6 you can use this code : 

removeDocument(doc){
   this.documents.forEach( (item, index) => {
     if(item === doc) this.documents.splice(index,1);
   });
}
Improve this answer

6 Comments

Best solution to remove without changing array reference AND with possibility to implement specific equality algorythm
Best answer have found
Best answer if using ES6
You can also use: this.documents.forEach( (item, index, array) => { if(item === doc) array.splice(index,1); }); Which can be a lot cleaner, especially when working with nested arrays.
@MashukurRahman question is about how to remove one item, not multiple ocurrences
|
51

It is my solution for that:

onDelete(id: number) {
    this.service.delete(id).then(() => {
        let index = this.documents.findIndex(d => d.id === id); //find index in your array
        this.documents.splice(index, 1);//remove element from array
    });

    event.stopPropagation();
}
Improve this answer

1 Comment

What's nice about this solution is that it will work even when object equality fails to identify two objects as equal.
32

let departments is an array. You want to remove an item from this array.

departments: string[] = [];

 removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }
Improve this answer

1 Comment

its filtering and updating the this.departments without a specific name,, filtering is not actually deleting
30

You can use the splice method on an array to remove the elements.

for example if you have an array with the name arr use the following:

arr.splice(2, 1);

so here the element with index 2 will be the starting point and the argument 2 will determine how many elements to be deleted.

If you want to delete the last element of the array named arr then do this:

arr.splice(arr.length-1, 1);

This will return arr with the last element deleted.

Example:

var arr = ["orange", "mango", "banana", "sugar", "tea"];
arr.splice(arr.length-1, 1)
console.log(arr); // return ["orange", "mango", "banana", "sugar"]
Improve this answer

3 Comments

Just FYI, the splice method modifies the array (so in this case removes the last item) and returns the removed item(s), not the array itself.
It should actually be arr.splice(arr.length-1,1) to remove the last element.
In order to delete the last element of an array, I'd use Array's pop method instead of splice.
20

Here's a simple one liner for removing an object by property from an array of objects.

delete this.items[this.items.findIndex(item => item.item_id == item_id)];

or

this.items = this.items.filter(item => item.item_id !== item.item_id);
Improve this answer

2 Comments

The problem with first solution is that delete removes element, but array size remains the same as before deteling. In second solution we will have a new object, so if we have spme dependency then we are losing it. Splice (which is in the top answer) does not have this effect.
Thanks for pointing that out. I think in my use case I had not discovered that yet. Well observed :)
20

This worked for me.

Your array:

DummyArray: any = [
    { "id": 1, "name": 'A' },
    { "id": 2, "name": 'B' },
    { "id": 3, "name": 'C' },
    { "id": 4, "name": 'D' }
]

Function:

remove() {
    this.DummyArray = this.DummyArray.filter(item => item !== item);
}

Note: This function deletes all the objects form your array. If you want to delete a specific object from array then use this method:

remove(id) {
    this.DummyArray = this.DummyArray.filter(item => item.id !== id);
}
Improve this answer

Comments

14

Multiple options in Typescript/Javascript to remove an element from Array. Splice is the best option as

  1. It removes inline without creating a new object
  2. It properly updates the length of the array (wont leave blank null element)

Below is an example of removing an object based on some field in a object array using Splice function

const persons = [
 {
   firstName :'John',
   lastName :'Michel'
  },
  {
   firstName :'William',
   lastName :'Scott'
  },  
  {
   firstName :'Amanda',
   lastName :'Tailor'
  }
]

console.log('Before Deleting :'+JSON.stringify(persons));
console.log('Deleting William:');
persons.splice(persons.findIndex(item => item.firstName === 'William'),1);
console.log('After Deleting William'+JSON.stringify(persons));

Improve this answer

1 Comment

I think you have misused the word 'mutate' here because splice definitely mutates the original object
13

Use this, if you need to remove a given object from an array and you want to be sure of the following:

  • the list is not reinitialized
  • the array length is properly updated
    const objWithIdToRemove;
    const objIndex = this.objectsArray.findIndex(obj => obj.id === objWithIdToRemove);
    if (objIndex > -1) {
      this.objectsArray.splice(objIndex, 1);
    }
Improve this answer

2 Comments

Could you please share why you used const for every variable?
@shivamsrivastava I like the code to be immutable where is possible; because of that I was using const instead of let.
8 
let a: number[] = [];

a.push(1);
a.push(2);
a.push(3);

let index: number = a.findIndex(a => a === 1);

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

console.log(a);
Improve this answer

Comments

6

Answer using TypeScript spread operator (...)

// Your key
const key = 'two';

// Your array
const arr = [
    'one',
    'two',
    'three'
];

// Get either the index or -1
const index = arr.indexOf(key); // returns 0


// Despite a real index, or -1, use spread operator and Array.prototype.slice()    
const newArray = (index > -1) ? [
    ...arr.slice(0, index),
    ...arr.slice(index + 1)
] : arr;
Improve this answer

Comments

6

One more solution using Typescript: 

let updatedArray = [];
for (let el of this.oldArray) {
    if (el !== elementToRemove) {
        updated.push(el);
    }
}
this.oldArray = updated;
Improve this answer

1 Comment

While this does resolve the problem asked, it is expensive to execute because of the creation of a new array and looping over the original. Doing this kind of operation on a huge array could produce undesirable side effects like, harder on mobile batteries, long waiting, jank, etc.
4 
function myFunction(ID){ 
let index = this.myArray.findIndex(d => d.ID === ID); //find index in your array
        console.log('index==',index);
        if (index > -1) {
          console.log('remaving at',index);
          this.myArray.splice(index, 1);//remove element from array
        }
}

Note: Your array must have a property called ID... otherwise it will return -1 which means not found

Improve this answer

Comments

1

Just wanted to add extension method for an array.

interface Array<T> {
      remove(element: T): Array<T>;
    }

    Array.prototype.remove = function (element) {
      const index = this.indexOf(element, 0);
      if (index > -1) {
        return this.splice(index, 1);
      }
      return this;
    };
Improve this answer

Comments

1

Similar to Abdus Salam Azad answer , but passing array as parameter from //https://love2dev.com/blog/javascript-remove-from-array/

function arrayRemove(arr:[], value:any) { 
    
    return arr.filter(function(ele){ 
        return ele != value; 
    });
}
Improve this answer

2 Comments

This is not "removing an item", this is "creating a new array without that item". Entirely different things.
@Clashsoft, true, but people often prefer immutable calls. If you want , you can re-assign result to the same variable myArr=arrayRemove(myArr, elemToRemove).
1 
_.pull(array,'a');

with a lib lodash https://lodash.com/docs/4.17.15#pull
complete code:

import _ from 'lodash';
const allTagList = ['a','b','b']
_.pull(allTagList, b);
console.log(allTagList) // result: ['a']

PS: Lodash offer lots of operators, I recommend to use it to simplify your code. https://lodash.com

Improve this answer

Comments

0

You can try to get index or position of list or array first, then use for loop to assign current array to a temp list, filter out unwanted item and store wanted item back to original array

removeItem(index) {
    var tempList = this.uploadFile;
    this.uploadFile = [];

    for (var j = 0; j < tempList.length; j++) {
      if (j != index)
        this.uploadFile.push(tempList[j]);
    }
  }
Improve this answer

Comments

0

We can implement the logic using filter and includes

const checkAlpha2Code = ['BD', 'NZ', 'IN']

let countryAlpha2Code = ['US', 'CA', 'BD', 'NZ', 'AF' , 'AR' , 'BR']


/**
 * Returns the modified array countryAlpha2Code 
 * after removing elements which matches with the checkAlpha2Code
 */
countryAlpha2Code = countryAlpha2Code.filter(alpha2code => {
    return !checkAlpha2Code.includes(alpha2code);
});
console.log(countryAlpha2Code)
// Output: [ 'US', 'CA', 'AF', 'AR', 'BR' ]


// Resetting the values again
countryAlpha2Code = ['US', 'CA', 'BD', 'NZ', 'AF' , 'AR' , 'BR']


/**
 * Returns the modified array countryAlpha2Code 
 * which only matches elements with the checkAlpha2Code
 */
countryAlpha2Code = countryAlpha2Code.filter(alpha2code => {
    return checkAlpha2Code.includes(alpha2code);
});

console.log(countryAlpha2Code)
// Output: [ 'BD', 'NZ' ]

Improve this answer

Comments

-1

I see many complaints that remove method is not in-built. Consider using Set instead of array - it has add and delete methods in-built.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.