How to delete records with a button in salesforce lightning

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes"
                access="global"
                controller="AccountCtrl">
  <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
        <aura:attribute name="Acclist"  type="list"/>
          <div>
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
              <thead>
                <tr class="slds-line-height_reset">
                   <th class="slds-text-title_caps" scope="col">
                      <div class="slds-truncate" title="AccountId">Accoount Id</div>
                    </th>
               <th class="slds-text-title_caps" scope="col">
                   <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
           
                  <th class="slds-text-title_caps" scope="col">
                          <div class="slds-truncate" title="Edit">Delete</div>
                       </th>
            </tr>
          </thead>
         <tbody>
               <aura:iteration items="{!v.Acclist}" var="item" >
                 <tr class="slds-hint-parent">
                     <th data-label="Opportunity Name" scope="row">
                        <div class="slds-truncate" title="Id"><a href="javascript:void(0);" tabindex="-1">{!item.Id}</a></div>
                    </th>
           <td data-label="Account Name">
                       <div class="slds-truncate" title="{!item.Name}">{!item.Name}</div>
                    </td>
             
          <td data-label="icon" class="slds-col slds-size_1-of-12" onclick="{!c.delete}" id="{!item.Id}">
                        <lightning:icon iconName="utility:delete" size="small" />
                    </td>
         
       
                </tr>
            </aura:iteration>
        </tbody>
        </table>
    </div>
</aura:component>




Controller
----------
({
 doinit: function(component) {
    var action = component.get('c.getAccountData');
    var self = this;
   action.setCallback(this, function(actionResult) {
  component.set('v.Acclist', actionResult.getReturnValue());
    });
   $A.enqueueAction(action);
 },

  delete : function(component, event) {
        var action = component.get("c.deleteAccount");
        action.setParams({AccountId:event.target.id});
        action.setCallback(this, function(response) {
        component.set("v.Acclist",response.getReturnValue());
        });
        $A.enqueueAction(action);
},
       

})


Class
-----
public with sharing class AccountCtrl { 
    @AuraEnabled
    public static List<Account> getAccountData(){
        return [select Id,Name from Account];
}
    @AuraEnabled
    public static List<Account> deleteAccount(String AccountId)
    {
        Account delAccount=[Select Id from Account where id=:AccountId];
        delete delAccount;
        return getAccountData();
    }
}