Remove class from elements created via for:each LWC

Question

I am trying to remove the 'hide' class from the anchor tags. But querySelector shows as null. I believe this is becuase the li elements are not in the DOM at the time of rendering hence it's showing as null in the querySelector

html:

<template>
     <lightning-layout>
           <ul>
               <template for:each={accounts.data} for:item="acc">
                    <li key={al.Id}>
                        <a href="#" onclick={myFunc} class="green-area">{acc.name}</a>
                    </li>
               </template>
           </ul>
     </lightning-layout>
</template>

js:

import { LightningElement } from 'lwc';
import getAccountList from '@salesforce/apex/AccountDept.getAccList';

    acTypes = [
          { dept: 'West Wing' },
          { dept: 'Southern Coast' },
          { dept: 'Belair Serpantine' },
    ];

export default class AccountListForLWC extends LightningElement {
        myFunc() {
               document.querySelector('.green-area').forEach( acountTypes => { 
                       this.classList.remove('hide');
               });
        }
    }

How can remove all the 'hide' class in these li elements when any of the anchor tags are clicked?