How to delete a chip on Ionic 4?

Ionic Framework
1

Hello,

I’m trying to delete some ion-chips on a modal but i don’t know how to do that, i just set a cross on every chip and just want to delete the element once cross pressed.

Thank you so much

Regards

2

Hello there,

Read your description - Can you please share your code details with me as well as costing idea in your mind? So will proceed further accordingly.

Thanks,
Tej

3 
    <ion-chip #angularChip>
      <ion-label>Money</ion-label>
      <ion-icon (click)="removeChip(angularChip)" name="close-circle"></ion-icon>
    </ion-chip>
    <ion-chip #angularChip>
      <ion-label>Technology</ion-label>
      <ion-icon (click)="removeChip(angularChip)" name="close-circle"></ion-icon>
    </ion-chip>

  removeChip(chip: Element) {
    chip.remove();
  }

It isn’t working and don’t know the solution

4

Hello there,

Thanks for sharing the above details - but I am actually looking for Code, if you can share with me - that will be great.

Regards.

5

This is my code, dont know what you want

6

Thanks but I need an entire source code, so I can evaluate. If you want - I am also ready to sign an NDA too.

7

ok its unuseful and unnecessary but i can show you

<ion-content>
<ion-card>
    <ion-chip #angularChip>
      <ion-label>Money</ion-label>
      <ion-icon (click)="removeChip(angularChip)" name="close-circle"></ion-icon>
    </ion-chip>

    <ion-chip #angularChip>
      <ion-label>Technology</ion-label>
      <ion-icon (click)="removeChip(angularChip)" name="close-circle"></ion-icon>
    </ion-chip>

  </ion-card>
</ion-content>

export class TestmodalPage implements OnInit {

  constructor(public modalCtrl: ModalController) { }

  ngOnInit() {
  }

  removeChip(chip: Element) {
    chip.remove();
  }

}

By the way… what does it mean NDA? thanks

The error is:

ERROR TypeError: chip.remove is not a function
    at TestmodalPage.push../src/app/testmodal/testmodal.page.ts.TestmodalPage.removeChip
8

Hello there,

Basically - NDA means Non-Discloser Agreement, where I am entitled and committed to not show your codes to other.

Moreover, thanks - but as I requested earlier, if you can showcase the code environment, then will proceed ahead. Additionally, let me know your budget as well.

Regards,
Tej

9

I have add chip dynamically and remove, please try below code it’s working for me

export class YourPage {
  tagArray = [];
  
  ngOnInit() {
    this.tagArray.push('Money');
    this.tagArray.push('Technology');
  }

  remove(id: number): void {
    this.tagArray.splice(id, 1);
  }
}

<ion-chip #chip *ngFor="let tag of tagArray; let i = index">
    <ion-label>{{tag}}</ion-label>
    <button ion-button clear color="dark" (click)="remove(i)">
    <ion-icon name="close-circle"></ion-icon>
    </button>
</ion-chip>
3 Likes
10

Thank you really so much, i did it! :wink: