How to delete a Records with a button in Salesforce Lightning

Apex class
-----------
public class updateSiteAC {
    @AuraEnabled
    public static list < Account > fetchAccount() {
       return [SELECT Id, name,site from Account Limit 10];
    }
   
     @AuraEnabled
    public static void deleteRecord(List < String > lstRecordId) {
        List<account> lstAccToDelete = new List<account>();
        for(account acc : [select id,Name,site from account where id IN : lstRecordId]){
            if(acc.site = 'Approved'){
            lstAccToDelete.add(acc);
        }
       
        if(lstAccToDelete.size() > 0){
            update lstAccToDelete;
        }
       
    }
}
Basic1.cmp
----------
<aura:component controller="updateSiteAC">
 
    <aura:attribute name="ListOfAccount" type="list" />
 
    <aura:handler name="init" value="{!this}" action="{!c.loadAccountList}"/>
   
    <div class="slds-grid slds-grid--align-end">
        <button class="slds-button slds-button--brand" onclick="{!c.upadateSite}">Delete</button>
    </div>
   
   
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
        <thead>
            <tr class="slds-text-title--caps">
                <th style="width:3.25rem;" class="slds-text-align--right">
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <label class="slds-checkbox">
                                <!--header checkbox for select all-->
                                <ui:inputCheckbox aura:id="box3" change="{!c.selectAll}"/>
                                <span class="slds-checkbox--faux"></span>
                                <span class="slds-form-element__label text"></span>
                            </label>
                        </div>
                    </div>
                </th>
                <th>
                    <span class="slds-truncate">ID</span>     
                </th>
                <th>
                    <span class="slds-truncate">Name</span>
                </th>
                <th>     
                    <span class="slds-truncate">Site</span>
                </th>
            </tr>
        </thead>
       
        <tbody>
            <aura:iteration items="{!v.ListOfAccount}" var="acc">
                <tr>
                    <td scope="row" class="slds-text-align--right" style="width:3.25rem;">
                        <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                <label class="slds-checkbox">
                                    <ui:inputCheckbox text="{!acc.Id}" aura:id="boxPack" value=""/>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-form-element__label text"></span>
                                </label>
                            </div>
                        </div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Id}"><a>{!acc.Id}</a></div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Name}">{!acc.Name}</div>
                    </td>
                    <td scope="row">
                        <div class="slds-truncate" title="{!acc.Site}">{!acc.Site}</div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>
</aura:component>


controller code
----------------
({
    loadAccountList: function(component, event, helper) {
        helper.onLoad(component, event);
    },
   
   
   
    selectAll: function(component, event, helper) {
       
        var selectedHeaderCheck = event.getSource().get("v.value");
        var getAllId = component.find("boxPack");
        if(! Array.isArray(getAllId)){
            if(selectedHeaderCheck == true){
                component.find("boxPack").set("v.value", true);   
            }else{
                component.find("boxPack").set("v.value", false);
            }
        }else{
            // check if select all (header checkbox) is true then true all checkboxes on table in a for loop 
            // and set the all selected checkbox length in selectedCount attribute.
            // if value is false then make all checkboxes false in else part with play for loop
            // and select count as 0
            if (selectedHeaderCheck == true) {
                for (var i = 0; i < getAllId.length; i++) {
                    component.find("boxPack")[i].set("v.value", true);
                }
            } else {
                for (var i = 0; i < getAllId.length; i++) {
                    component.find("boxPack")[i].set("v.value", false);
                }
            }
        } 
       
    },
   
   
    upadateSite: function(component, event, helper) {
       
        var updateId = [];
       
        var getAllId = component.find("boxPack");

        if(! Array.isArray(getAllId)){
            if (getAllId.get("v.value") == true) {
                updateId.push(getAllId.get("v.text"));
            }
        }else{

            for (var i = 0; i < getAllId.length; i++) {
                if (getAllId[i].get("v.value") == true) {
                    updateId.push(getAllId[i].get("v.text"));
                }
            }
        }
       
        helper.SelectedHelper(component, event, updateId);
       
    },
   
})



Helper
------

({
    onLoad: function(component, event) {
        var action = component.get('c.fetchAccount');
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.ListOfAccount', response.getReturnValue());
                component.find("box3").set("v.value", false);
            }
        });
        $A.enqueueAction(action);
    },
   
    SelectedHelper: function(component, event, RecordsIds) {
       
        var action = component.get('c.deleteRecord');
        action.setParams({
            "lstRecordId": RecordsIds
        });
        action.setCallback(this, function(response) {
           
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(state);
                this.onLoad(component, event);
window.alert('records deleted');
            }
        });
        $A.enqueueAction(action);
    },
})

Lightning application
----------------------
<aura:application extends="force:slds" >
    <c:Basic1/>
</aura:application>