I want to delete the rows using the utility icon in lightning datatable and I used onrowaction but it's removing all the records from that array list instead of removing them based on the selection id. Can someone please help me with this?

<div class="slds-box">
    <lightning-card title="Add Shipto" icon-name="custom:custom2">
        <lightning-datatable hide-checkbox-column="true" key-field="Id" data={Accounts} columns={addedAccColumns} data-id="datatable"


 @track Accounts= [];

    const selectedEvtRows = event.detail.row.Id;
    let removeRec;
    for (let i = 0; i < selectedEvtRows.length; i++) {
        const toRemove = this.Accounts.splice(this.Accounts.findIndex(row => row.Id === selectedEvtRows[i]), 0);
        removeRec = toRemove;
    this.Accounts= removeRec;

1 Answer 1


That code is just wiping out the table data entirely. Instead, you will want to use Array.prototype.splice with exactly two parameters, the index to start at, and the number of elements to delete (1). Because of how lightning-datatable works, you might also need to copy the array. This is just three lines of code:

let recordIndex = this.Accounts.findIndex((record)=>record.Id===event.detail.row.Id);
this.Accounts.splice(recordIndex, 1);
this.Accounts = [...this.Accounts];
  • Thank you for the solution. the above code is removing the row on an index basis nor on the row reference. Suppose I added 3 records followed by sequence order and I am removing the middle record it's removing the first record instead of removing the second record. Please suggest what code changes I need to make.
    – Ryan
    Nov 10, 2023 at 18:14
  • @Ryan I see what I did there. I meant findIndex. This new code should work correctly.
    – sfdcfox
    Nov 10, 2023 at 20:30

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .