点击任务卡片删除按钮误删首个卡片的DOM问题求助

问题根源 #

• closeTask()函数中，document.querySelector(".card")只会返回页面中第一个匹配.card类的元素，因此无论点击哪个删除按钮，都会删除第一个任务卡片。
• 所有删除按钮都使用了重复的id="closeTasks"，HTML规范要求id必须唯一，这会导致DOM选择器行为异常，不符合标准。
• 内联onclick="closeTask()"没有传递当前点击的按钮实例，无法关联到对应的父级卡片。

解决方案1：事件委托（推荐） #

事件委托只需给父容器绑定一次事件，性能更优，尤其适合动态添加的元素：

'use strict'

const submitBtn = document.querySelector('#submit')
const inputVal = document.querySelector('.title')
const dateVal = document.querySelector('.date')
const taskDiv = document.querySelector('#task')

// 给父容器绑定点击事件，监听删除按钮操作
taskDiv.addEventListener('click', function(event) {
  // 判断点击的是否为删除按钮
  if (event.target.classList.contains('close-tasks')) {
    // 找到按钮所属的卡片并删除
    event.target.closest('.card').remove()
  }
})

submitBtn.addEventListener("click" , function(event){
    event.preventDefault()
    let card = document.createElement('div')
    card.classList.add('card')
    // 把重复id改为class，移除内联onclick
    card.innerHTML=` 
        <div class="card_top_bar">
            <h3>${inputVal.value}</h3>
            <button class="close-tasks">x</button>
        </div>
        <span>start : ${dateVal.value}</span>
        <span>end : </span>
        <div class="cardBtnSection">
            <button class="cardBtn minimize"><i class="b bi-dash-circle"></i></button>
            <button class="cardBtn info"><i class="b bi-info-circle"></i></button>
            <button class="cardBtn next"><i class="b bi-check-circle"></i></button>
        </div>
    `
    taskDiv.appendChild(card)
})

解决方案2：创建卡片时直接绑定事件 #

如果不想用事件委托，可以在创建卡片后给删除按钮单独绑定点击事件：

'use strict'

const submitBtn = document.querySelector('#submit')
const inputVal = document.querySelector('.title')
const dateVal = document.querySelector('.date')
const taskDiv = document.querySelector('#task')

submitBtn.addEventListener("click" , function(event){
    event.preventDefault()
    let card = document.createElement('div')
    card.classList.add('card')
    card.innerHTML=` 
        <div class="card_top_bar">
            <h3>${inputVal.value}</h3>
            <button class="close-tasks">x</button>
        </div>
        <span>start : ${dateVal.value}</span>
        <span>end : </span>
        <div class="cardBtnSection">
            <button class="cardBtn minimize"><i class="b bi-dash-circle"></i></button>
            <button class="cardBtn info"><i class="b bi-info-circle"></i></button>
            <button class="cardBtn next"><i class="b bi-check-circle"></i></button>
        </div>
    `
    // 给当前卡片的删除按钮绑定点击事件
    const closeBtn = card.querySelector('.close-tasks')
    closeBtn.addEventListener('click', function() {
        card.remove()
    })
    taskDiv.appendChild(card)
})

额外注意事项 #

• 其他按钮（minimize、info、next）也使用了重复id，建议统一改为class，避免DOM选择器出错。
• closest('.card')方法会向上查找最近的匹配.card的父元素，比逐层调用parentNode更可靠。

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