You could parse your HTML string to a document in JS and then add the event listener to that element.

So you've got your Template Literal string.

const messageFormatted = messageText => {

  return `

  <li class=message-item>

    <img class=message-avatar src=./icons/boy.png alt=Username>

      <article class=message-content>

        <p class=author>Ernesto Campese</p>

        <p class=message>${messageText}</p>

        <p class=datetime>A moment ago</p>

      </article>

      <div class=message-actions>

        <img id=message-edit class=action-button src=./icons/edit.png alt= width=22 height=22>

        <img id=message-delete class=action-button src=./icons/delete.png alt= width=22 height=22>

      </div>

  </li>

  `;

}

You can transform your string into HTML by writing a function like the one below.
It uses the DOMParser API which creates a new document that will contain all of your HTML you've written in your string.

const parseStringToHTML = (str) => {

  const parser = new DOMParser();

  return parser.parseFromString(str, 'text/html');

};

And this document works like the one you have in your page, its just a new one that only exists in your JS memory for the time being. Give your string as argument to parseStringToHTML to create HTML.

const message = messageFormatted('This is the message'); // Example message

const messageHTML = parseStringToHTML(message); // Returns a document object with all the features a document object has.

So now that your string is a document you can use methods on it like getElementById, querySelector, etc. But first you must select the element that you need.

const messageDeleteButton = messageHTML.querySelector(#message-delete);

See that I've used messageHTML instead of document. In this scenario messageHTML is a document and therefor we can query inside of it. And now you've found your element inside this document you can add an event listener to it.

messageDeleteButton.addEventListener(click, (e) => {

    e.parentNode.parentNode.remove();

});

Okay, so now the event listener has been added. All you have to do now is append the HTML you need from the messageHTML into the document of your page. The HTML can be found in the messageHTML.body property.

Now instead of insertAdjacentHTML use insertAdjacentElement to insert the element in the position of your choosing. The element you want to append is the <li class=message-item> which would be the firstElementChild in the body of the messageHTML.body property.

So in your submit event listener of your form change the following line from:

messageList.insertAdjacentHTML(beforeend, messageFormatted(messageTextarea.value));

To all that I've explained above.

// Create string

const message = messageFormatted(messageTextarea.value);



// String to document

const messageHTML = parseStringToHTML(message);



// Select delete element.

const messageDeleteButton = messageHTML.querySelector(#message-delete);



// Add event listener to delete element.

messageDeleteButton.addEventListener(click, (e) => {   

    e.parentNode.parentNode.remove();

});



// Append the <li> element to the messageList.

messageList.insertAdjacentElement(beforeend, messageHTML.body.firstElementChild); 

Don't forget to include the parseStringToHTML function in your code. I understand that this is a lot to work out so if you have any question please do ask.

I hope that this will help you out.

Note I see that event delegation (global event listener) is not something you want to do, although as other have stated, it is more performant and easier to implement than other methods, even my own answer. It would also solve listening for elements that you've added or even removed from your list. You could set it even on the <ul id=message-list> element like T.J. Crowder suggested.