want to add a delete button in angular that will delete data called from xml

I have called data from xml to angular, it can be displayed in ui side,now how do I delete the each row which in turn remove data from xml.

here is the code that was in component.ts

import { Component, OnInit } from '@angular/core';
import  * as xml2js from 'xml2js';  
import { HttpClient, HttpHeaders } from '@angular/common/http';  
@Component({  
  selector: 'app-ap',  
  templateUrl: './ap.component.html',  
  styleUrls: ['./ap.component.css']  
})  
export class ApComponent {  
  title = 'read-xml-angular8';  
  public xmlItems: any; 
   
  constructor(private _http: HttpClient) { this.loadXML(); }  
  loadXML() {  
    this._http.get('/assets/empdetails.xml',  
      {  
        headers: new HttpHeaders()  
          .set('Content-Type', 'text/xml')  
          .append('Access-Control-Allow-Methods', 'GET')  
          .append('Access-Control-Allow-Origin', '*')  
          .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method"),  
        responseType: 'text'  
      })  
      .subscribe((data) => {  
        this.parseXML(data)  
          .then((data) => {  
            this.xmlItems = data;  
          });  
      });  
  }  
  parseXML(data: any) {  
    return new Promise(resolve => {  
      var k: string | number,  
        arr:any = [],  
        parser = new xml2js.Parser(  
          {  
            trim: true,  
            explicitArray: true  
          });  
      parser.parseString(data, function (err, result) {  
        var obj = result.Employee;  
        for (k in obj.emp) {  
          var item = obj.emp[k];  
          arr.push({  
            id: item.id[0],  
            name: item.name[0],  
            address: item.address[0],  
            designation: item.designation[0]  
          });  
        }  
        resolve(arr);  
      });  
    }); 
     
  }  
}

this code will show the data as a table.Now how do i add delete each row. It should delete information from xml also.

and here is the html code

<div class="container">    
    <table class="table table-bordered table-hover">    
      <tr>    
        <th>Id</th>    
        <th>Name</th>    
        <th>Address</th>    
        <th>Designation</th>    
      </tr>    
      <tr *ngFor="let item of xmlItems">    
        <td>{{item.id}}</td>    
        <td>{{item.name}}</td>    
        <td>{{item.address}}</td>    
        <td>{{item.designation}}</td> 
        <td>
            <button style="color: rgb(16, 12, 12);" data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-info" >Edit</button>
                <button style="color: rgb(16, 9, 9);"(click)="onRemoveClick()" class="btn btn-danger mx-3">Delete</button>
        </td>   
      </tr>    
    </table>    
  </div>