Delete multiple rows dynamically from contacts in lightning web component (LWC) | how to dynamically remove selected rows for a table in lwc

Today i am working on how to delete multiple rows dynamically from contacts in lightning web component(LWC)

➡ To know more details about How to retrieve data from multiple object and delete cross object records, Click Here.

deleteMultipleContacts.html [Lightning Web Component]

<template> <lightning-card> <h3 slot="title"> <lightning-icon icon-name="standard:contact" size="small"></lightning-icon> Mass Delete Records </h3> <lightning-datatable data={contacts.data} columns={columns} key-field="id" onrowselection={prepareSelectedRows}></lightning-datatable> <br/> <div slot="footer"> <lightning-button label="Delete Selected Records" onclick={deleteSelRecords} variant="brand"></lightning-button> <div> {message} </div> </div> </lightning-card> </template>

deleteMultipleContacts.js [JavaScript File]

import { LightningElement, wire, track } from 'lwc'; import getContactList from '@salesforce/apex/accountCreationControllerLwc.getContactList'; import deleteSelectedContacts from '@salesforce/apex/accountCreationControllerLwc.deleteSelectedContacts'; import {refreshApex} from '@salesforce/apex'; import {ShowToastEvent} from 'lightning/platformShowToastEvent'; export default class MassDeleteLwc extends LightningElement { @wire(getContactList) contacts; @track selectedContactIdList = []; @track message; @track error; @track columns = [ {label:'First Name',fieldName:'FirstName',type:'text'}, {label:'Last Name',fieldName:'LastName',type:'text'}, {label:'Phone', fieldName:'Phone', type:'Phone'} ]; prepareSelectedRows(event){ const selectedRows = event.detail.selectedRows; this.selectedContactIdList = []; console.log('selectedRows~~ ' + selectedRows.length); for(let i=0; i<selectedRows.length; i++){ this.selectedContactIdList.push(selectedRows[i].Id); } console.log('selectedContactIdList#A# ' + this.selectedContactIdList); } deleteSelRecords(){ console.log('resultMsg## ' + JSON.stringify(this.selectedContactIdList)); deleteSelectedContacts({delContactIdList : this.selectedContactIdList}) .then(result =>{ this.message = result; this.dispatchEvent( new ShowToastEvent({ title:'Success', message:'Selected Contacts are deleted', variant:'success' }), ); //for clearing selected row indexs this.template.querySelector('lightning-datatable').selectedRows = []; return refreshApex(this.contacts); }) .catch(error =>{ this.message=undefined; this.error=error; const toastEvent = new ShowToastEvent({ title:'Error deleting records!', message:error.body.pageErrors[0].message, variant:'error' }); this.dispatchEvent(toastEvent); }); } }

deleteMultipleContacts.js-meta.xml [MetaData File]

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

accountCreationControllerLwc.cls [Apex Controller File]

public with sharing class accountCreationControllerLwc { @AuraEnabled(cacheable=true) public static List<contact> getContactList(){ return [Select Id, firstName, lastName,Title, Phone, Email From Contact Where firstName !=null order by createdDate desc]; } // This method deletes the selecteds based on the contact ids sent from LWC @AuraEnabled public static void deleteSelectedContacts(List<id> delContactIdList){ List<contact> contactList = new List<contact>(); contactList = [Select Id From Contact Where Id IN:delContactIdList]; System.debug('contactList# ' + contactList); if(contactList !=null && contactList.size()>0){ delete contactList; } } }

➡ To know more live demo in LWC, Use this link..