移除按钮无法删除最后创建的卡片问题排查

问题原因 #

核心问题是异步操作的时机不匹配：getData是异步函数，表单提交时调用getData()后立刻执行byebye()，但此时fetch请求尚未完成，新卡片还未插入DOM中，因此最后一个卡片的.btn按钮没有被document.querySelectorAll(".btn")选中，也就没绑定点击事件。
之前项目能正常工作，大概率是因为元素是同步创建的（无需等待异步请求），byebye()执行时所有按钮已存在于DOM中。

解决方案1：调整事件绑定时机 #

把byebye()调用移到getData函数内的卡片插入操作之后，确保新卡片已存在于DOM中再绑定事件：

修改getData函数：

async function getData(){
    let thing = DOMSelectors.itemname.value.toLowerCase();
    thing = thing.replaceAll(' ','-')
    let URL = `https://www.dnd5eapi.co/api/spells/${thing}`; 
    console.log(URL)
    try {
        const response = await fetch(URL);
        console.log(response);
        if (response.status !=200){
            throw new Error(response.statusText);
        }
        const data = await response.json(); 
        let id = ""
        if(data.hasOwnProperty("damage")){
            id = data.damage.damage_type.index
        }else if(data.hasOwnProperty("heal_at_slot_level")){
            id= "heal"
        }else{
            id=data.school.index
        }
        console.log(data.name, id);
        DOMSelectors.parent.insertAdjacentHTML(
            "beforeend",
            `<div class='card' id=${id}>
            <h2 id="name" class="name">${data.name}</h2>
            <h3 id="price" class="name">${data.desc}</h3>
            <button class="btn">REMOVE</button>
            </div>`
        )
        byebye() // 移到此处，确保新卡片已插入DOM
    } catch (error){
        alert("Enter a valid spell")
    }
}

同时修改表单提交事件，移除多余的byebye()调用：

DOMSelectors.form.addEventListener("submit", function(event) {
    event.preventDefault();
    getData();
    clearfields();
    // 移除这里的byebye()
});

解决方案2：使用事件委托（更优） #

无需每次创建卡片都绑定事件，直接给父容器.container绑定一次事件，利用事件冒泡机制处理按钮点击。这种方式更高效，还能避免重复绑定事件的问题：

删除原有的byebye函数，在代码初始化阶段添加如下事件监听：

// 给父容器绑定事件，处理所有.btn按钮的点击
DOMSelectors.parent.addEventListener('click', function(event) {
    // 判断点击目标是否为删除按钮
    if (event.target.classList.contains('btn')) {
        // 移除按钮所在的卡片
        event.target.parentElement.remove();
    }
});

之后表单提交事件和getData函数里都不需要再调用byebye()。

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