How to delete the records with a button in LWC

Video link
========
https://www.youtube.com/watch?v=7rXycIcjHPM&t=71s

Apex Class
==========
public with sharing class AccountCls
{
    @AuraEnabled(cacheable=true)
    public static List<Account> displayAccounts()
{
        List<Account> acclist=[select Id,Name from Account LIMIT 10];
        return acclist;
}
}

deleteAccountsData.html
=======================
<template>
    <template if:true={accounts}>
        <table class="slds-table slds-table_cell-buffer slds-table_header-hidden">
<thead class="slds-assistive-text">
<tr class="slds-line-height_reset">
  <th class="" scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
  </th>
  <th class="" scope="col">
<div class="slds-truncate" title="Action">Action</div>
  </th>
</tr>
</thead>
<template for:each={accounts.data} for:item="acc">
<tr key={acc.Id}>
<td>
{acc.Name}
</td>
<td >
<lightning-button label="Delete" variant="brand" onclick={doDelete} value={acc.Id}>
</lightning-button>
</td>
</tr>
</template>
        </table>
    </template>
</template>

controller
==========
import { LightningElement, api, track, wire } from 'lwc';
import { deleteRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import displayAccounts from '@salesforce/apex/AccountCls.displayAccounts'
export default class DeleteAccountsData extends LightningElement(LightningElement) {
    @wire(displayAccounts) accounts;
    @api recordId;
    @api objectApiName;
    @track error;
    doDelete(event) {
        this.recordId=event.target.value;
        deleteRecord(this.recordId)
        .then(() => {
            return refreshApex(this.accounts);
        })
        .catch((error) => {
            this.message = 'Error received: code' + error.errorCode + ', ' +
                'message ' + error.body.message;
        });
    }
 
}