I have a 'Tour' object with multiple 'Steps' associated to it through a master-detail relationship. I display the 'Steps' with an accordion that queries all of them based on the currentRecordId. I want to have a 'Delete' button for each step within the accordion and onclick it would take in the step.Id and delete that step from the database. My JS file works as needed right now, but I'd like to be able to delete from within the accordion.

public static List<Step__c> getSteps(Id tourId){
    return [SELECT Id, Name FROM Step__c WHERE Tour__c =: tourId];

public static void deleteStep(Id stepId){
    List<Step__c> steps = [SELECT Id FROM Step__c WHERE Id =: stepId];
    delete steps;

Example Html:

<lightning-accordion allow-multiple-sections-open>
    <template if:true={steps.data}>
        <template for:each={steps.data} for:item="step">
            <lightning-button label="Delete" variant="destructive" onclick={deleteStep}></lightningbutton>
            <!-- Code to grab {step.Id} and give it to Javascript that calls Apex function to delete -->

Example JS:

    deleteStep({stepId: accordionStepId}) //something like this
    .then(result => {
        this.message = 'it worked';
    .catch(error => {
        this.error = 'is this even possible';

You can use HTML5 Data Attributes likea data-key on button and set id of step in it.

On click event of button you are calling the deleteStep method, you can use event.currentTarget.dataset.key to get the id. You can send this id to server and delete the record.

  • Thank you! This was very helpful, I got what I needed. – ThatBrayKid Sep 3 '20 at 14:09

Not the answer you're looking for? Browse other questions tagged or ask your own question.