Todo应用中LocalStorage存储项的remove函数重载后失效问题

我正在开发一款Todo应用，希望页面重载后removeButton.onclick = function()仍可正常工作。该函数对新创建的任务项有效，但对LocalStorage中保存的任务项，页面重载后就会失效。我尝试通过window.onload = function ()调用该函数，但问题依旧，请问如何让该函数在页面重载后仍能正常工作？

附带代码：

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 )

问题核心：从LocalStorage恢复的HTML元素（包括删除按钮）没有绑定点击事件，且原代码中的removefunction仅针对新创建的单个按钮，无法覆盖重载后恢复的所有按钮。

改动步骤： #

1. 用事件委托替代单个按钮绑定：给任务容器newd绑定一次点击事件，通过判断点击目标是否为删除按钮来执行删除逻辑，不管是新创建还是重载恢复的按钮，都能触发事件。
2. 移除无效的window.onload绑定：原代码把window.onload写在createTask函数内，每次创建任务都会覆盖该事件，且无法作用于恢复的元素，完全无意义。
3. 统一删除逻辑：将删除操作封装成独立函数，所有场景下的删除都复用同一逻辑。

修改后的代码： #

let ids1 = document.getElementById('ids')
let ids2 = document.getElementById('ids2')
let buttonCreateTask = document.querySelector('.create')
let newd = document.querySelector('.newd')

// 页面加载时恢复存储的任务
let prevContent = localStorage.getItem('saved');
if (prevContent) {
    newd.innerHTML = prevContent
}

// 通用删除函数
function handleRemoveTask(e) {
    // 判断点击目标是删除按钮
    if (e.target.tagName === 'BUTTON' && e.target.textContent === 'REMOVE') {
        const paro = e.target.parentElement
        paro.remove()
        // 更新本地存储
        localStorage.setItem('saved', newd.innerHTML)
    }
}

// 给任务容器绑定事件委托
newd.addEventListener('click', handleRemoveTask)

// 创建任务函数
function createTask (){ 
    const taskTitle = ids1.value.trim()
    const taskDesc = ids2.value.trim()

    if (!taskTitle) {
        alert('缺少任务标题')
        return
    }
    if (!taskDesc) {
        alert('缺少任务描述')
        return
    }

    const paro = document.createElement('p')
    paro.innerText = `${taskTitle}\n${taskDesc}`

    const removeButton = document.createElement('button')
    removeButton.textContent = 'REMOVE' 

    paro.appendChild(removeButton)
    newd.appendChild(paro)

    // 清空输入框并更新存储
    ids1.value = ''
    ids2.value = ''
    localStorage.setItem('saved', newd.innerHTML) 
}

// 绑定创建任务按钮事件
buttonCreateTask.addEventListener('click', createTask )

关键说明： #

• 事件委托：利用事件冒泡机制，仅在父容器newd上绑定一次点击事件，所有子元素的点击都会冒泡到父容器，通过判断点击目标执行对应逻辑，完美解决动态元素（含重载恢复元素）的事件绑定问题。
• 优化DOM选择器：用querySelector替代getElementsByClassName，代码更简洁，适合唯一类名的场景。
• 输入验证优化：用trim()处理输入内容，避免空字符被当作有效输入。

内容的提问来源于stack exchange，提问作者willd