remove function stops working after reload

Question

I have been working on a todo app and I want to be able to use removeButton.onclick = function() after the page reloads. the function works but it stops working on items that have been saved in localStorage once is reloaded

let ids1 = document.getElementById('ids')
let ids2 = document.getElementById('ids2')

let buttonCreateTask = document.getElementsByClassName('create')
let newd = document.getElementsByClassName('newd')

let prevContent = localStorage.getItem('saved');
if (prevContent) { newd[0].innerHTML = prevContent}

function createTask (){ 

let paro = document.createElement('p')
paro.innerText = ids1.value + '\n' + ids2.value

let removeButton = document.createElement('button')
removeButton.innerHTML = 'REMOVE' 

paro.appendChild(removeButton)

let removefunction = () => { 
removeButton.onclick = function() {
    if(paro){ 
    paro.remove()
    localStorage.setItem('saved',  newd[0].innerHTML)
    }
}
}
removefunction()

window.onload = function (){
        if(prevContent){
            removefunction()
    }
}

if(ids1.value !== ''){ 
    if(ids2.value !== ''){ 
        newd[0].appendChild(paro)
ids1.value = ''
ids2.value = ''
localStorage.setItem('saved',  newd[0].innerHTML) 
    }else {
       alert('mising description')
    }
}else {
     alert('misning value')
}

buttonCreateTask[0].addEventListener('click', createTask )

I have tried to do window.onload = function () to call removeButton.onclick = function() inside it but still does not work after reload. How could I keep it working even when the page has reloaded?

Answer 1

Use event delegation on the outer container.

First give each remove button a class for identification.

let removeButton = document.createElement('button');
removeButton.classList.add('remove');

Then, attach a click event listener on the newd container.

newd[0].addEventListener('click', function(e){
    if (e.target.matches('button.remove')) {
        e.target.parentElement.remove();
        localStorage.setItem('saved',  newd[0].innerHTML)
    }
});