如何删除列表中被点击元素及其相邻兄弟节点，解决删除操作仅刷新页面后生效问题？

问题根因 #

你的删除事件绑定逻辑仅在页面首次加载时执行一次。后续每次调用render()函数都会清空列表容器的原有内容、重新生成所有列表节点，新生成的垃圾桶图标并未绑定点击事件，因此只有页面刷新后首次加载的元素能触发删除操作，新增/重新渲染的元素点击无响应。

原工具效果预览：

解决方法 #

推荐两种方案，第二种事件委托方案性能更优、代码更简洁：

方案1：每次渲染完成后重新绑定删除事件 #

将原代码中独立的删除事件绑定逻辑挪到render函数末尾，确保每次生成新DOM后都绑定对应事件：

function render(lst) {
    let listItems = '';  
    lst.forEach((element, index) => {
         listItems += `
              <li>
                  <a href='${element}'>${element}</a>
                  <img src="images/remove.png"  class="remove" data-index="${index}"> 
              </li>`
    });
    view.innerHTML = listItems;

    // 新增：渲染完成后绑定所有删除图标的点击事件
    const removeBtns = document.querySelectorAll(".remove"); 
    Array.from(removeBtns).forEach(el => {
        el.addEventListener('click', () => { 
            const index = el.dataset.index;
            list.splice(index, 1);
            localStorage.setItem('list', JSON.stringify(list));
            render(list);
        })
    });
}

修改完成后删除原代码中独立的删除事件绑定代码即可。

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

直接给列表的父容器绑定点击事件，利用事件冒泡机制处理所有删除按钮的点击，无需每次渲染都重新绑定事件：

// 页面首次加载时绑定一次即可，无需重复绑定
view.addEventListener('click', e => {
    // 仅点击删除图标时触发逻辑
    if (e.target.classList.contains('remove')) {
        const index = e.target.dataset.index;
        list.splice(index, 1);
        localStorage.setItem('list', JSON.stringify(list));
        render(list);
    }
})

使用该方案直接删除原代码中独立的删除事件绑定代码即可，无需修改原render函数。

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