Lightning web component deleteRecord function

Let us discuss here how to use lightning/uiRecordApi modules. This module includes wire adapters to record data and get default values to create records. It also includes JavaScript APIs to create, delete, update, and refresh records. one of the most of important function is deleteRecord that will be used to delete a record in the database without using apex class.

Syntax 

import { deleteRecord } from 'lightning/uiRecordApi';
deleteRecord(recordId: Record): Promise<void>

sfdx force:lightning:component:create --type lwc -n deleterecord -d force-app/main/default/lwc

Use this markup in deleterecord.html

<template>
    <lightning-card title="Delete Record" icon-name="standard:record">
        Record Id to Delete : - {recordId}
        <lightning-button name="delete" label="delete" onclick={deleteAccount} data-recordid={recordId}></lightning-button>
    </lightning-card>
</template>

Use this deleterecord.js code

import {
    LightningElement,
    api
} from 'lwc';
import {
    getRecord
} from 'lightning/uiRecordApi';

import {
    deleteRecord
} from 'lightning/uiRecordApi';

import {
    ShowToastEvent
} from 'lightning/platformShowToastEvent';

export default class Deleterecord extends LightningElement {
    @api recordId;
    deleteAccount(event) {
        const recordId = event.target.dataset.recordid;
        console.log('delete account' + recordId);
        deleteRecord(recordId)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record Is  Deleted',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error While Deleting record',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }
}

Use this deleterecord.js-meta.xml file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Push changes to scratch org.

Push changes to scratch using this command and add this component to record page using lighting app builder

sfdx force:source:push

Add the Delete Record component to Salesforce record page using app builder and you can able to see the delete button as shown below.

Understand the code 

Import deleteRecord function from lightning/uiRecordApi modules .

import {
    deleteRecord
} from 'lightning/uiRecordApi';

invoke the deleteRecord function on the button click as shown below. This method will show the Toast message once the record is deleted or fail to delete.

const recordId = event.target.dataset.recordid;
        console.log('delete account' + recordId);
        deleteRecord(recordId)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record Is  Deleted',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error While Deleting record',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }