Why my click event is not functioning on new created element in JS

Question

This is a little app for sticky notes, there is one issue in it. I created Click event on my image inside button, but it is not working. When i click on cross icon, nothing happens.

HTML:

        <!-- input  -->
<section class="input-con">
    <main class="input-main">
        <input type="text" class="input" placeholder="Type Notes">
        <button type="submit" class="submit-button">Create</button>
    </main>
</section>

<!-- stickey notes  -->

<section class="notes-con">
    <main>
        <div class="note-item">
            <h4 class="task-number">Task 0</h4>
            <h2 class="task-detail">Preview Of the Task</h2>
            <button class="cross"><img src="cross-circle.svg"></button>
        </div>
    </main>
</section>

Javascript:

const input = document.querySelector('.input');
const submitBtn = document.querySelector('.submit-button');
const taskName = document.querySelector('.task-detail');
const notesContainer = document.querySelector('.notes-con');
const noteItem = document.querySelector('.note-item');


let taskNumber = 0;

submitBtn.addEventListener('click', function (e) {
taskNumber += 1;    
const inputValue = input.value;
const newNote = document.createElement('main')
const newNoteHTML = `<div class="note-item">
<h4 class="task-number">Task ${taskNumber}</h4>
<h2 class="task-detail">${inputValue}</h2>
<button class="cross"><img src="cross-circle.svg"></button>
</div>`;
newNote.innerHTML = newNoteHTML;
notesContainer.append(newNote);
})

const cross = document.querySelector('.cross');
cross.addEventListener('click', function(e){
e.currentTarget.parentNode.remove();

})