DOM function and .classList.remove() not working in an onclick event listener

Question

I am trying to add a function that is triggered when a link is clicked on. Clicking on the link is supposed to remove a class from an element and set the textcontent of another another element to 0. However none of the two events happen, but if i put a console.log in the function to log out a message in the console if the link is clicked, it shows up on the console, nothing else works in the function

<div>
            <p class="my-auto mark-read"><a href="#" id="mark-read">Mark all as read</a></p>
</div>
<div class="container d-flex mt-4 py-2 rounded not-bar unread">
            <div>
                       <img src="./assets/images/avatar-mark-webber.webp" alt="">
            </div>
            <div class="my-auto ms-4">
                       <p class="my-auto"><span class="name"><a href=""> Mark Werber </a></span> reacted to your recent post <span class="post"><a href=""> My first tournamemt today! </a></span><span class="fw-bold ms-2 new">o</span><br><span class="time">1m ago</span></p>
            </div>
</div>

The script code below

document.addEventListener('DOMContentLoaded', () => {
  const notBar = document.getElementsByClassName('not-bar')
  const notIcon = document.getElementsByClassName('not-icon')
  const markRead = document.getElementById('mark-read')

  markRead.addEventListener('click', () => {
    // notBar.classList.remove('unread');
    notIcon.textContent = 0
    console.log("Notifications cleared")
  })
})