Delete Record LWC Example.

Scenario:
Display list of 10 Account records and each row contains a radio button for record selection. Select any record by click on radio button and then click on a Delete button for record deletion.

Solution:
1. Create a method [getListOfAccounts()] under an apex class [AccountHandler.apxc].
2. Make this method [getListOfAccounts()] as @AuraEnabled. This method will return 10 account records.

AccountHandler.apxc

public with sharing class AccountHandler {

    @AuraEnabled(cacheable=true)
    public static List<Account> getListOfAccounts(){
        return [SELECT Id, Name, AccountNumber FROM Account LIMIT 10];
    }
}

3. Now create below LWC component to call the above apex method to display 10 accounts with radio button on each row and a delete button for deletion.

deleteRecord.js-meta.xml

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

deleteRecord.html

<template>
    <lightning-card title="Account Details">
        <lightning-layout multiplerows="true" verticalalign="center">
            <lightning-layout-item padding="around-small" size="3">
                <template if:true={lstOfAccounts.data}>    
                    <table class="slds-table slds-table_bordered slds-border_left slds-border_right">
                        <thead>
                            <tr class="slds-line-height_reset">
                                <th class="" scope="col">
                                    <div class="slds-truncate" title="Select">Select</div>
                                </th>
                                <th class="" scope="col">
                                    <div class="slds-truncate" title="Name">Name</div>
                                </th>
                                <th class="" scope="col">
                                    <div class="slds-truncate" title="accId">Account Id</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <template for:each={lstOfAccounts.data} for:item="acc">
                                <tr key={acc.Name} class="slds-line-height_reset">
                                    <td>
                                        <lightning-input name="rdNm" type="radio" label="" value={acc.Id} onchange={handleChanges} ></lightning-input>
                                    </td>
                                    <td>
                                        <div class="slds-truncate" title="Name">{acc.Name}</div>
                                    </td>
                                    <td>
                                        <div class="slds-truncate" title="accId">{acc.Id}</div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                    <br/>
                    <button onclick={deleteAccountRecord}>Delete</button>
                </template>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

deleteRecord.js

import { LightningElement, wire } from 'lwc';
import getListOfAccounts from '@salesforce/apex/AccountHandler.getListOfAccounts';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ApexCall extends LightningElement {
    selectedRecIdValue;
    @wire(getListOfAccounts) lstOfAccounts;

    // Fetch user input.
    handleChanges(event){
        this.selectedRecIdValue = event.target.value;
        //console.log("selectedRecIdValue----------"+this.selectedRecIdValue);
    }

    deleteAccountRecord(event){
        deleteRecord(this.selectedRecIdValue)
            .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',
                    }),
                );
            });
    }
}

OUTPUT: