Javascript 从html元素中获取itemName数据属性

我试着测试项目教程中的一些新手技巧。想要创建一个小规模的任务应用程序，遇到了一个奇怪的问题。下面的最后一个document.addEventListener理论上应该调用类名为“.name”的最近元素，因为它与按钮位于同一父div中。但是，它返回NULL。我是否应用了.closest（）方法错误

每次创建任务后，事件侦听器都会检测该按钮。不确定在通过addTaskButton创建任务后，类名为“.name”的任务返回NULL的原因。我甚至尝试根据taskName本身创建一个数据属性id，以查看它是否会检测到，但仍然为NULL/错误

const list = []

const container = document.querySelector('.container');
const itemContainer = document.querySelector('.item');
const addTaskButton = document.querySelector('.add-task');
const taskInput = document.querySelector('#task-name');


function renderTasks(){
    itemContainer.innerHTML = ''
    list.forEach(task => {
        const itemElement = document.createElement('div')
     
        itemElement.innerHTML = `
            <div class="name">
                ${task.taskName}
            </div>
            <button class="retrieval">Retrieve ID</button>
        `
        itemElement.dataset.itemName = task.taskName
        itemContainer.appendChild(itemElement);
    })
}

addTaskButton.addEventListener('click', (e)=>{
    e.preventDefault();
    list.push({ taskName: taskInput.value})


    renderTasks()
})



document.addEventListener('click', (e)=>{
    if(e.target.matches('.retrieval')){
        const taskName = e.target.closest('.name');
        console.log(taskName)
    }
})

const list=[]
const container=document.querySelector（'.container'）；
const itemContainer=document.querySelector（'.item'）；
const addTaskButton=document.querySelector（'.addtask'）；
const taskInput=document.querySelector（“#任务名称”）；
函数renderTasks（）{
itemContainer.innerHTML=''
list.forEach（任务=>{
const itemElement=document.createElement（'div'））
itemElement.innerHTML=`
${task.taskName}
检索ID
`
itemElement.dataset.itemName=task.taskName
appendChild（itemElement）；
})
}
addTaskButton.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
list.push（{taskName:taskInput.value}）
renderTasks（）
})
document.addEventListener（'单击'，（e）=>{
if（例如target.matches（'.retrieval'））{
const taskName=e.target.closest（'.name'）；
console.log（任务名）
}
})

好的，我仔细检查了一下，上面写着：

closestElement是元素的最接近祖先 选定的元素。它可能是空的

---

这意味着它只查找父母和父母的父母等等，而不是“兄弟姐妹”。

您可以调用

document.querySelector（“.name”）只是为了查看这是否有效，这是一个良好的检查。它显示为NULL，但我知道innerHTML正在工作。。任务项正在填充HTML源。。由于某种原因，在我按下检索按钮后，我似乎无法正确地瞄准它。有趣的是，您可以尝试使用
document.createElement
创建div，然后将其附加到其他div，并使用
div.setAttribute（“class”，“name”）
动态地为其指定类，它可以有效地做同样的事情，但问题可能与以下事实有关：该元素是从另一个元素的
中的字符串创建的。innerHTML
OK，我仔细检查了mdn文章（）它说“CloseSteElement是所选元素最接近的祖先元素。它可能为空。”我认为这意味着它只寻找父母和父母的父母等等，而不是“兄弟姐妹”，我同意。非常感谢。我完全误解了MND的文章，我将数据属性设置为我从createElement创建的“虚构”div。关注我这边的细节是至关重要的