点击Delete按钮删除对应行失败，请求排查代码问题

一、HTML结构问题 #

<li>元素的合法父容器是<ul>或<ol>，而非<div>——虽然浏览器能勉强渲染，但不符合HTML语义规范，建议修正为：

<ul class="item-list">
    <li> Apple <button>Delete</button></li>
    <li> Ball <button>Delete</button></li>
    <li> Cat <button>Delete</button></li>
    <li> Dog <button>Delete</button></li>
</ul>

二、JS代码核心问题 #

1. 错误批量删除元素：点击单个按钮时，你获取了所有<li>并循环删除第一个子元素，这会导致一次性删掉所有<li>，而非当前按钮对应的那一个。
2. 方法调用对象错误：document.querySelectorAll('.li li')返回的是NodeList，它没有removeChild方法——这个方法只能由DOM元素节点调用。
3. 未正确关联目标元素：没有通过点击事件定位到当前按钮所属的<li>，而是盲目操作所有元素。

三、修正后的JS代码 #

方案1：直接绑定按钮事件（适合静态元素） #

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
    button.addEventListener('click', function() {
        // 通过this获取当前点击的按钮，再取其父元素<li>并删除
        this.parentElement.remove();
    });
});

方案2：事件委托（适合动态添加元素的场景） #

// 给父容器绑定事件，利用事件冒泡统一处理
document.querySelector('.item-list').addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
        e.target.parentElement.remove();
    }
});

代码说明 #

• this.parentElement：事件回调里的this指向当前被点击的按钮，parentElement直接获取它的父元素<li>。
• remove()：DOM元素的remove()方法可直接删除自身，比removeChild更简洁。
• 事件委托优势：后续动态添加新的<li>和按钮时，无需重新绑定事件，父容器会自动处理。

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