Delete Record in LWC using deleteRecord of uiRecordApi

In this post, we will implement the functionality to delete records in LWC using deleteRecord of uiRecordApi module. Let’s hop into the implementation.


In this implementation, we will display a list of Opportunities with the Delete button for each record. Once the Delete button is pressed, the respective Opportunity will be deleted from Salesforce.

Delete Record in LWC using deleteRecord of uiRecordApi
Delete Record in LWC using deleteRecord of uiRecordApi

First, create a Lightning Web Component to display the list of Opportunities. Make an Imperative call to Apex to get the list of Opportunities. Check this post to know how to call the Apex method from Lightning Web Component, as this post won’t explain it. You can also use the Wire Service to make a call to the Apex method. Both of these methods are explained in the linked post. So I recommend to check it. Use lightning-card to display each Opportunity with the Delete button at the footer of each card.


        <div class="flex-container">
            <template for:each={lstOppotunities} for:item="opp">
                <lightning-layout-item size="4" padding="around-small" key={opp.Id}>
                    <lightning-card  title={opp.Name}>
                        <p class="slds-p-horizontal_small">Stage: {opp.StageName}</p>
                        <p class="slds-p-horizontal_small">Amount: 
                            <lightning-formatted-number value={opp.Amount} format-style="currency" currency-code="USD">
                        <p slot="footer">
                            <lightning-button label="Delete" variant="destructive" slot="actions"
                                value={opp.Id} onclick={deleteOpportunity}></lightning-button>


public with sharing class OpportunityController {
    public static List<Opportunity> fetchOpportunities(){
        return [SELECT Id, Name, AccountId, TotalOpportunityQuantity, Amount, StageName FROM Opportunity LIMIT 9];

Delete Record in LWC

To delete records in LWC, we first need to import fetchOpportunities method from Apex Controller using @salesforce/apex/ module in JS Controller. Then, include deleteRecord method from lightning/uiRecordApi module. In Constructor, call the Apex method to get the list of Opportunities to display on UI using lstOppotunities property.

deleteOpportunity() method will be called once the Delete button is pressed on any of the Opportunity. In this method, get the Id of Opportunity and call the deleteRecord()with Id of Opportunity as a parameter. deleteRecord() returns the Promise. If it is successful, show the Success Toast message. Check this post to know how to display Toast messages in Lightning Web Component. Once the record is deleted, we are also deleting a record from UI by removing the record from lstOppotunities. If we use the Wire Service to fetch the records, we can use refreshApex(this.wireProperty) to refresh the records in lstOppotunities. If the delete operation is not successful, handle it in the catch block.

Also Read:


import { LightningElement, track } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.fetchOpportunities';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class DeleteRecord extends LightningElement {
    @track lstOppotunities = [];
        // Imperative Apex call to get the list of Opportunities
        getOpportunities({}).then(response => {
            this.lstOppotunities = response;
        }).catch(error => {
            console.log('Error: ' +error.body.message);
        let deleteId =;
        .then(() => {
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Record deleted successfully',
                    variant: 'success'
            // To delete the record from UI
            for(let opp in this.lstOppotunities){
                if(this.lstOppotunities[opp].Id == deleteId){
                    this.lstOppotunities.splice(opp, 1);
        .catch(error => {

Also Read:

That is all. This is how we can delete records in LWC using deleteRecord of uiRecordApi module. If you don’t want to miss new Implementations, please Subscribe here.

If you want to check more implementations using Lightning Web Components, you can check it here.

Check official Salesforce documentation to know more about deleteRecord of uiRecordApi here.

2 thoughts on “Delete Record in LWC using deleteRecord of uiRecordApi”

  1. I stuck at a place, but when I gone through this code, I a got the output what I expected, but the records are come in only one vertical column, how can we make it to 3 columns as u shown in the
    implementation display mode

    • Hi Yuvaraj, There are multiple ways to achieve this. You can use SLDS Grid Layout or the combination of Lightning-layout and lightning-layout-item. But the easiest way is to use flex-container class on your parents DIV which will arrange the box dynamically based on the size of your window, which is the same thing that I did in this implementation.


Leave a Comment