如何实现点击.remove元素删除对应列表项（支持jQuery）

数据老陈

2026-5-29

解决方案：点击.remove元素删除对应列表项

我来帮你搞定这个问题～首先得指出你原生JS写法里的一个小问题：document.getElementsByClassName('remove')返回的是HTMLCollection元素集合，不是单个元素，所以不能直接给它绑定click事件，得遍历每个元素单独绑定才行。下面分别给出原生JS和jQuery两种实现方案：

方案一：原生JavaScript实现

// 获取所有class为remove的元素
const removeButtons = document.getElementsByClassName('remove');

// 遍历集合，给每个按钮绑定点击事件
for (let i = 0; i < removeButtons.length; i++) {
  removeButtons[i].addEventListener('click', function() {
    // 获取当前点击按钮的ID
    const buttonId = this.id;
    console.log('点击了ID为' + buttonId + '的删除按钮');
    
    // 找到对应的父级li元素（用closest找最近的li祖先，比parentElement更灵活）
    const targetLi = this.closest('li');
    // 删除这个li
    if (targetLi) {
      targetLi.remove();
    }
  });
}

解释一下：

用addEventListener绑定点击事件，this指向当前被点击的.remove元素，通过this.id就能拿到它的ID
closest('li')会向上查找最近的<li>祖先元素，这样就算你的DOM结构后续有调整（比如.remove外面多套了一层标签），也能准确找到要删除的列表项

方案二：jQuery实现（更简洁）

如果你可以用jQuery的话，代码会简洁很多，jQuery会自动帮你遍历元素集合：

// 给所有.remove元素绑定点击事件
$('.remove').on('click', function() {
  // 获取当前按钮的ID
  const buttonId = $(this).attr('id');
  console.log('点击了ID为' + buttonId + '的删除按钮');
  
  // 找到并删除对应的li
  $(this).closest('li').remove();
});

解释一下：