待办应用中点击同class的span删除对应li元素的实现问题

现有代码问题说明 #

你当前的实现思路存在两个明显错误：

• 用offsetHeight区分元素的方案不可靠：如果多个待办项高度一致会触发误删，完全不需要用该属性做元素定位
• 现有代码里的判断条件element.offsetHeight == element.offsetHeight永远成立，变量与自身比较的结果恒为true，逻辑无效

实现方案 #

要获取被点击的对应span非常简单：点击事件的回调函数会接收事件对象作为参数，事件对象的target属性直接指向你实际点击的DOM元素，无需额外做匹配判断。
你可以选择两种实现方式：

方案1：给所有span单独绑定事件 #

适合待办项不会动态新增的场景：

const deleteSpans = document.querySelectorAll(".span")
deleteSpans.forEach(span => {
  span.addEventListener('click', e => {
    // 找到span所属的li元素直接删除
    e.target.parentElement.remove()
  })
})

方案2（更推荐）：用事件委托实现 #

绑定一次即可兼容后续动态新增的待办项，无需每次新增元素后重新绑定事件：

const todoList = document.getElementById('list')
const addBtn = document.getElementById('addİtem')
const input = document.getElementById('inputText')
const clearAllBtn = document.getElementById('clear-all')

// 全局删除逻辑
todoList.addEventListener('click', e => {
  // 仅点击删除span时才触发删除
  if (e.target.classList.contains('span')) {
    e.target.parentElement.remove()
  }
})

// 补充新增待办功能
addBtn.addEventListener('click', () => {
  const inputVal = input.value.trim()
  if (!inputVal) return
  const newLi = document.createElement('li')
  newLi.className = 'list-item'
  newLi.innerHTML = `${inputVal} <span class="span">X</span>`
  todoList.appendChild(newLi)
  input.value = ''
})

// 补充清空所有待办功能
clearAllBtn.addEventListener('click', () => {
  todoList.innerHTML = ''
})

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