如何实现动态生成列表项的按钮点击删除对应数组项？

当前代码点击按钮无响应、无法删除对应项的核心原因有两个：

• 动态生成的Done按钮没有绑定任何点击事件逻辑，点击后自然不会触发任何操作
• 生成的HTML结构不规范：按钮被放在<li>标签外部，也没有和myWork数组的对应项做关联，无法定位需要删除的具体条目

只需要调整renderItems函数的逻辑，做两处修改即可：

1. 调整生成的HTML结构，将按钮放到<li>内部，同时给按钮加自定义属性data-index，存储当前条目对应的数组索引
2. 每次列表渲染完成后，遍历所有动态生成的Done按钮绑定点击事件：点击时获取对应索引，删除数组中对应位置的元素后重新渲染列表

修复后的完整可运行代码：

let myWork = []
const submitEl = document.getElementById("submit-el")
const clearEl = document.getElementById("clear-el")
const listEl = document.getElementById("list-el")
const textEl = document.getElementById("text-el")

submitEl.addEventListener("click", function () {
    // 过滤空输入，避免提交空白条目
    const inputVal = textEl.value.trim()
    if (!inputVal) return
    myWork.push(inputVal)
    textEl.value = "" // 提交后清空输入框
    renderItems()
})

clearEl.addEventListener("click", function () {
    myWork.pop()
    renderItems()
})

function renderItems() {
    let listItems = ""
    for (let i = 0; i < myWork.length; i++) {
        // 按钮嵌套在li内部，通过data-index绑定数组下标
        listItems += `
        <li>
            ${myWork[i]}
            <button class="done-btn" data-index="${i}">Done</button>
        </li>
        `
    }
    listEl.innerHTML = listItems

    // 给所有动态生成的完成按钮绑定删除事件
    const doneButtons = document.querySelectorAll(".done-btn")
    doneButtons.forEach(btn => {
        btn.addEventListener("click", function(e) {
            // 读取当前按钮绑定的数组索引
            const targetIndex = Number(e.target.dataset.index)
            // 删除数组对应位置的条目
            myWork.splice(targetIndex, 1)
            // 重新渲染更新后的列表
            renderItems()
        })
    })
}

• data-*是HTML原生支持的自定义属性，用来给DOM元素挂载业务数据（这里是数组索引），不需要额外维护DOM和数据的映射关系，实现简单
• 必须在每次innerHTML更新完成后再绑定按钮事件：因为重置innerHTML会销毁旧的DOM节点，之前绑定的事件会全部失效
• splice(索引, 1)是数组原生方法，可以精准删除指定位置的元素，适配当前按索引删除条目的场景

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