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

AngularJS Large file size

Using an asynchronous pipe filter with the ngFor loop in Angular 2 for efficient data

ag-grid Server Side pagination function to enable independent setting of last row

What is the method to access the value of a different model in ExpressJs?

404 Error: Unable to Locate Socket Io

"Encountering an error when trying to access undefined property in templates

An unexpected error has occurred in Angular 2 while referencing the service proxy with code asd:18. The error message is: (SystemJS) Unexpected token < SyntaxError: Unexpected token

Ways to Access HTTP Request Headers in Angular 6 upon Page Load

Updating the data attribute of an object in HTML using Angular

Using the map method in JavaScript, merge two separate arrays to create a new array

Learn the process of sending a delete request to a REST API with Angular

Generate TypeScript type definitions for environment variables in my configuration file using code

Exploring the sharing of observables/subjects in Angular 2

What exactly do Dependencies mean in Angular?

I prefer to have static modules generated on the home page rather than dynamic ones

Prevent the Vue page from loading until the data has been fetched successfully

There is no throttleTime function available in Angular 6 within Rx Js

MasterNG - Submitting form details and uploading files with a button press

What is the best way to transform RestApi object information into an Array?

What causes the entire set of dynamically created cards to collapse when using the toggle collapse button in ngb-bootstrap's Collapse control?