Delete a specific element from an array using a specified criteria

Question

Delete a specific element from an array using a specified criteria

I'm attempting to remove a specific item from an array based on the selected option. To better understand, take a look at this code:

component.html

<fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" name="tipoprodotto">
    <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes" [value]="p.id">{{p.description}}</fnd-option>
</fnd-extended-select>

Component.ts

  deleteMsg() {
    this.agreementfilter.landingPageTypes.splice(1, 1);
  }

Essentially, when I click the button to delete the item, only the FIRST object in the array gets removed.

What I Want: Remove the item that I have selected from the array.

What are my options for solving this issue?

Appreciate your assistance!

arrays angular typescript splice

Answer 1

Answer №1

component.html

<fnd-extended-select label="Product Type:" [(ngModel)]="selectedType" 
 name="producttype">
<fnd-option *ngFor="let type of productFilter?.productTypes; let i = index" 
  [value]="i">{{type.description}}</fnd-option></fnd-extended-select> <button (click)="removeType(selectedType)"></button>

component.ts

 selectedType;

  public removeType(id: number) {
    // find index of item to be removed and delete it from the array
    this.productTypes.splice(id, 1);

    // display updated array in console after deletion
    console.log('productTypes: ', this.productTypes);
  }

public change(id) {
  // update select option and store index in a variable
  this.selectedType = id;
  console.log(id);
}

view example at stackblitz

Answer 2

component.html

<fnd-extended-select label="Product Type:" [(ngModel)]="selectedType" 
 name="producttype">
<fnd-option *ngFor="let type of productFilter?.productTypes; let i = index" 
  [value]="i">{{type.description}}</fnd-option></fnd-extended-select> <button (click)="removeType(selectedType)"></button>

component.ts

 selectedType;

  public removeType(id: number) {
    // find index of item to be removed and delete it from the array
    this.productTypes.splice(id, 1);

    // display updated array in console after deletion
    console.log('productTypes: ', this.productTypes);
  }

public change(id) {
  // update select option and store index in a variable
  this.selectedType = id;
  console.log(id);
}

view example at stackblitz

Answer 3

Answer №2

To implement this, you can include a click event and pass the index as a parameter.

Here is an example in Component.html:

 <fnd-extended-select label="Product Type:" [(ngModel)]="landingType" 
     name="producttype">
    <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes; let i = index" 
      [value]="p.id" (click)="removeItem(i)">{{p.description}}</fnd-option>
  </fnd-extended-select>

And in your Component.ts file:

 removeItem(index) {
   this.agreementfilter.landingPageTypes.splice(this.agreementfilter.landingPageTypes.indexof(index), 1);
}

Answer 4

To implement this, you can include a click event and pass the index as a parameter.

Here is an example in Component.html:

 <fnd-extended-select label="Product Type:" [(ngModel)]="landingType" 
     name="producttype">
    <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes; let i = index" 
      [value]="p.id" (click)="removeItem(i)">{{p.description}}</fnd-option>
  </fnd-extended-select>

And in your Component.ts file:

 removeItem(index) {
   this.agreementfilter.landingPageTypes.splice(this.agreementfilter.landingPageTypes.indexof(index), 1);
}

Answer 5

Answer №3

The correct solution was shared by @Nenad Radak within the comments section of his answer.

I saved the value in my component and then retrieved it when the button event occurred.

code:

temporary:string;

<fnd-extended-select label="Product Type:" [(ngModel)]="landingType" name="producttype">
  <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes; let i = index" (click)="tempor(i)" [value]="p.id">{{p.description}}</fnd-option>
</fnd-extended-select>


 tempor(index){debugger;
   this.temporary= index
 }
  deleteMsg() {

    this.agreementfilter.landingPageTypes.splice(this.temporary, 1);
 }

Answer 6

The correct solution was shared by @Nenad Radak within the comments section of his answer.

I saved the value in my component and then retrieved it when the button event occurred.

code:

temporary:string;

<fnd-extended-select label="Product Type:" [(ngModel)]="landingType" name="producttype">
  <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes; let i = index" (click)="tempor(i)" [value]="p.id">{{p.description}}</fnd-option>
</fnd-extended-select>


 tempor(index){debugger;
   this.temporary= index
 }
  deleteMsg() {

    this.agreementfilter.landingPageTypes.splice(this.temporary, 1);
 }

Answer 7

Answer №4

To remove a specific item from an array, utilize the delete message function by passing in the ID of the item you wish to delete. Next, find the index of that item within the array using findIndex. Once you have located the index, leverage the splice method to eliminate the entry at that position.

For a practical demonstration, I have created a Stackblitz example: https://stackblitz.com/edit/angular-icpmqo

public deleteMessage(id: number) {
    this.pageTypesArray.splice(this.pageTypesArray.findIndex((page) => page.id === id), 1);
}

Answer 8

To remove a specific item from an array, utilize the delete message function by passing in the ID of the item you wish to delete. Next, find the index of that item within the array using findIndex. Once you have located the index, leverage the splice method to eliminate the entry at that position.

For a practical demonstration, I have created a Stackblitz example: https://stackblitz.com/edit/angular-icpmqo

public deleteMessage(id: number) {
    this.pageTypesArray.splice(this.pageTypesArray.findIndex((page) => page.id === id), 1);
}

Answer 9

Answer №5

If you are looking to remove an item from a list, you can do so by locating its index. Let's say the item you wish to delete is the one you have selected (which in this case is referred to as 'landingType').

      deleteMsg() {
        this.agreementfilter.landingPageTypes.splice(this.agreementfilter.landingPageTypes.indexOf(landingType), 1);
}

Here's an example:

    var months = ['Jan', 'March', 'April', 'June'];
      console.log(months);
    // expected output: Array ['Jan','March', 'April', 'June']

     console.log(months);
     months.splice(months.indexOf('April'), 1);
   // expected output: Array ['Jan','March', 'June']

Answer 10

If you are looking to remove an item from a list, you can do so by locating its index. Let's say the item you wish to delete is the one you have selected (which in this case is referred to as 'landingType').

      deleteMsg() {
        this.agreementfilter.landingPageTypes.splice(this.agreementfilter.landingPageTypes.indexOf(landingType), 1);
}

Here's an example:

    var months = ['Jan', 'March', 'April', 'June'];
      console.log(months);
    // expected output: Array ['Jan','March', 'April', 'June']

     console.log(months);
     months.splice(months.indexOf('April'), 1);
   // expected output: Array ['Jan','March', 'June']

Delete a specific element from an array using a specified criteria

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

E6 arrow functions simplify the process of condensing an array of objects into a single object

Tips for converting numerical values in a JSON object to strings within a TypeScript interface

What is the most reliable method for converting a 32-bit unsigned integer to a big endian byte array?

`Angular 6 and the expiration of Jwt tokens`

Error encountered while upgrading to Angular 5: splitHash issue

Can a Vue application be made type-safe without the need for transpilation?

Guide for registering to modifications of a single key within a form group in Angular 2

Ensuring Consistency of Values Between Child and Parent Components

Whenever I attempt to make changes to the React state, it always ends up getting reset

Cannot assign type void to 'Intrinsic Attributes & Dispatch<SetStateAction<>>'

Switching over to Typescript: Sending mapped properties

Issue with Readonly modifier not functioning as expected in Angular/Typescript

Update a BehaviourSubject's value using an Observable

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

Verify the presence of identical items in the array

TypeScript properties for styled input component

With TypeScript, you have the flexibility to specify any data type in the generic types when using the axios.get method

Leveraging Angular for Remote Configuration Management

Disabling an anchor using the 'disabled' property is proving to be a challenge for me

Is it necessary to include explicit overlapping imports in Angular if they are already imported in the parent component?