How to delete the items from confirmation popup when we click on button

For the below angular code I have some iteration of data,and now I have to delete the items when we clcik on the delete button it will show the confirmation popup to delete or not if we clcik on yes the particular item has to be removed from the iteration.

.cmponent.ts

public saveHealthyHabits() {
    let isCategoryExist = false;
    let categoryDetails = {
      category: this.clinicalNoteForm.controls.category.value,
      habitDetails: this.healthyHabits.value,
      showDetails: true,
    };
    
    if (this.selectedCategoryDetails) {
      this.selectedCategoryDetails.forEach((selectedCategory) => {
        if (selectedCategory.category === categoryDetails.category) {
          isCategoryExist = true;
          selectedCategory.habitDetails = selectedCategory.habitDetails.concat(
            categoryDetails.habitDetails
          );
        }
      });
    }
   //some code
  }
public deletedata(categoryDetail){
    this.selectedCategoryDetails.forEach((selectedCategory) => {
      //have to add the code here 
})
    
  }

.component.html

 <ng-container *ngFor="let categoryDetail of selectedCategoryDetails">
      <div>
        <div>
          <b>{{ categoryDetail.category }}</b>
        </div>
         </div>

      <div *ngIf="categoryDetail.showDetails">
      <ul>
          <li class="habit-list"
            *ngFor="let habits of categoryDetail.habitDetails" >
        
            <div class="target-details">
              <b>{{ clinicalNoteLabels.target }}: </b
              ><span class="habit-list__value">{{ habits.target }}</span>
            </div>
          </li>
        </ul>
        <div class="habit-footer">
       <span class="m-l-10"  
          [popoverOnHover]="false"
          type="button"
          [popover]="customHabitPopovers"><i class="fa fa-trash-o" ></i> Delete</span>
        </div>
        <div class="clinical-note__popoverdelete">

        <popover-content #customHabitPopovers [closeOnClickOutside]="true">
          <h5>Do you want to delete this habit?</h5>
          <button
          class="btn-primary clinical-note__save"  (click)="deletedata(categoryDetail);customHabitPopovers.hide()">yes </button>
       
        </popover-content></div>
      </div>
    </ng-container>

In the above code after adding the items If I want to delete some particular item when we clcik on item it will show the confirmation popup with some text and buttons yes and no,

So when we click on yes button from the popup it has to remove the particular item.
I am new to angular can anyone help me on this

>Solution :

You could just filter out the element that needs to be removed:

public deletedata(categoryDetail) {
  this.selectedCategoryDetails = 
    this.selectedCategoryDetails.filter(cd => cd !== categoryDetail);
}