JavaScript待办列表删除功能报Uncaught DOMException错误求助

问题分析 #

报错的核心原因是每次点击添加按钮时，你都会给#ul重复绑定点击事件。比如添加3个待办项后，#ul上就会挂载3个点击事件监听：

• 第一次触发删除：成功移除对应的li元素；
• 第二次及后续触发：此时目标li已经不在#ul的子节点列表里了，再调用items.removeChild(targetBtn)就会抛出“要移除的节点不是当前节点的子元素”的错误。

另外还有两个小问题：

• 你用document.createElement('X')创建了一个不存在的HTML标签，虽然浏览器会兼容解析，但规范上应该用<button>或<span>这类合法标签；
• 设置li.textContent = inputValue.value后再追加删除按钮的逻辑没问题，但可以调整写法让代码更清晰。

修复后的代码 #

let inputValue = document.querySelector('.input')
let button = document.querySelector('.button')
let items = document.querySelector('#ul')

// 只绑定一次点击事件，用事件委托处理所有删除操作
items.addEventListener('click', (e) => {
    // 判断点击的是否为删除按钮
    if (e.target.classList.contains('delete-btn')) {
        const targetLi = e.target.parentNode
        // 直接调用元素自身的remove方法，比removeChild更直观安全
        targetLi.remove()
    }
})

button.addEventListener('click', function (){
    // 过滤空输入，避免创建空白待办项
    if (!inputValue.value.trim()) return
    
    let li = document.createElement('li')
    // 用合法的button标签创建删除按钮
    let deleteBtn = document.createElement('button')
    deleteBtn.textContent = 'X'
    deleteBtn.classList.add('delete-btn') // 添加类名用于识别点击目标
    
    // 先添加文本节点，再追加删除按钮，避免内容覆盖问题
    li.appendChild(document.createTextNode(inputValue.value))
    li.appendChild(deleteBtn)
    items.appendChild(li)
    
    // 清空输入框提升用户体验
    inputValue.value = ''
})

关键改进点 #

• 事件委托：把点击事件绑定在父元素#ul上，仅绑定一次，后续新增的待办项也能触发删除逻辑，彻底解决重复绑定导致的多次触发问题；
• 删除按钮规范化：用<button>替代自定义的<X>标签，通过类名精准识别点击目标；
• 安全删除：使用element.remove()直接删除元素，无需依赖父元素的removeChild，降低报错风险；
• 空输入过滤：避免创建无意义的空白待办项。

内容的提问来源于stack exchange，提问作者Kunsang Tamang