如何删除无ID元素？实现hover时选中元素并删除

不需要依赖元素ID，我们可以通过闭包保存当前悬停的.box元素，或者直接在删除按钮的点击事件中引用之前记录的目标元素，具体改造方案如下：

改造后的JavaScript代码 #

const list = document.getElementById('list');
const btnDel = document.getElementById('btnDel');
let currentHoverBox = null; // 保存当前悬停的.box元素

list.addEventListener('mouseenter', e => {
  if (e.target.matches('.box')) {
    currentHoverBox = e.target; // 记录当前悬停的元素
    const rect = e.target.getBoundingClientRect();
    btnDel.style.top = rect.top + 'px';
    btnDel.style.display = 'block';
  }
}, true);

// 给删除按钮绑定点击事件，直接移除当前记录的元素
btnDel.addEventListener('click', () => {
  if (currentHoverBox) {
    currentHoverBox.remove();
    btnDel.style.display = 'none'; // 删除后隐藏按钮
    currentHoverBox = null; // 清空记录
  }
});

// 鼠标离开列表时隐藏删除按钮
list.addEventListener('mouseleave', () => {
  btnDel.style.display = 'none';
  currentHoverBox = null;
});

方案说明 #

• 用变量currentHoverBox直接保存当前悬停的.box DOM对象，完全不需要给元素添加ID
• 抛弃了字符串形式绑定onclick的写法，直接使用事件监听，代码更安全易维护
• 补充了mouseleave事件处理，确保鼠标离开列表区域后删除按钮自动隐藏，优化交互体验

完整代码示例 #

HTML #

<div id="list">
  <div class="box">Box 01</div>
  <div class="box">Box 02</div>
  <div class="box">Box 03</div>
  <div class="box">Box 04</div>
  <div class="box">Box 05</div>
</div>

<div id="btnDel">
  <div>
    (X) Delete
  </div>
</div>

CSS #

#list {
  max-width: 200px;
}

#list div {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
  font-weight: 600;
}

#btnDel {
  cursor: pointer;
  position: absolute;
  display: none;
  left: 204px;
}

#btnDel div {
  background-color: #ffdfdf;
  padding: 7px;
  border-radius: 7px;
  color: red;
  font-size: 15px;
}

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