we can use force:recordData to delete the record in Lighting Component.
To delete a record using Lightning Data Service, call deleteRecord on the force:recordData component, and pass in a callback function to be invoked after the delete operation completes.
Delete operations with Lightning Data Service are straightforward. The force:recordData tag can include minimal details. If you don’t need any record data, set the fields attribute to just Id. If you know that the only operation is a delete, any mode can be used.
To perform the delete operation, call deleteRecord on the force:recordData component from the appropriate controller action handler. deleteRecord takes one argument, a callback function to be invoked when the operation completes. This callback function receives a SaveRecordResult as its only parameter. SaveRecordResult includes a state attribute that indicates success or error, and other details you can use to handle the result of the operation.
PFB the Sample Code:
Component Code
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="recordError" type="String" access="private"/>
<force:recordData aura:id="recordHandler"
recordId="{!v.recordId}"
fields="Id"
targetError="{!v.recordError}"
recordUpdated="{!c.handleRecordUpdated}" />
<!-- Display the delete record form -->
<div class="Delete Record">
<lightning:card iconName="action:delete" title="Delete Record">
<div class="slds-p-horizontal--small">
<lightning:button label="Delete Record" variant="destructive" onclick="{!c.handleDeleteRecord}"/>
</div>
</lightning:card>
</div>
<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
<div class="recordError">
{!v.recordError}</div>
</aura:if>
Js Code
({
handleDeleteRecord: function(component, event, helper) {
component.find("recordHandler").deleteRecord($A.getCallback(function(deleteResult) {
// NOTE: If you want a specific behavior(an action or UI behavior) when this action is successful
// then handle that in a callback (generic logic when record is changed should be handled in recordUpdated event handler)
if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
// record is deleted
console.log("Record is deleted.");
} else if (deleteResult.state === "INCOMPLETE") {
console.log("User is offline, device doesn't support drafts.");
} else if (deleteResult.state === "ERROR") {
console.log('Problem deleting record, error: ' + JSON.stringify(deleteResult.error));
} else {
console.log('Unknown problem, state: ' + deleteResult.state + ', error: ' + JSON.stringify(deleteResult.error));
}
}));
},
/**
* Control the component behavior here when record is changed (via any component)
*/
handleRecordUpdated: function(component, event, helper) {
var eventParams = event.getParams();
if(eventParams.changeType === "CHANGED") {
// record is changed
} else if(eventParams.changeType === "LOADED") {
// record is loaded in the cache
} else if(eventParams.changeType === "REMOVED") {
// record is deleted, show a toast UI message
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Deleted",
"message": "The record was deleted."
});
resultsToast.fire();
} else {
// there’s an error while loading, saving, or deleting the record
}
}
})
e.force.deleteRecord
handler (yet). The best available alternative would be to call your component's Apex controller to delete the record. Just remember to confirm the deletion, use the "with sharing" attribute on the controller for security and return/handle a response from Apex.