鼠标悬停子div显示btn-trash按钮并删除该div的实现问题

先看你提供的HTML结构：主容器#recentList里包含多个.list-group-item子项，每个子项自带默认隐藏的.btn-trash按钮。你的需求是鼠标悬停子项时显示删除按钮，点击后删除对应子项，但原JS代码没生效，核心问题出在选择器错误，另外还需要补充删除按钮的点击逻辑。

原代码的问题分析 #

你写的事件绑定选择器是#recentList.list-group-item，这个选择器的含义是「同时拥有id="recentList"和class="list-group-item"的元素」，但实际.list-group-item是#recentList的子元素，正确的后代选择器应该是#recentList .list-group-item（注意两个选择器之间的空格）——这就是鼠标事件完全没触发的根本原因。

修正后的完整代码 #

下面是修复后的JS代码，同时补充了删除按钮的点击逻辑：

// 鼠标悬停时显示删除按钮
$(document).on('mouseenter', '#recentList .list-group-item', function() {
    $(this).find(".btn-trash").show();
});

// 鼠标离开时隐藏删除按钮
$(document).on('mouseleave', '#recentList .list-group-item', function () {
    $(this).find(".btn-trash").hide();
});

// 点击删除按钮，移除对应的子div
$(document).on('click', '#recentList .btn-trash', function() {
    // 找到当前按钮所属的.list-group-item父元素并移除
    $(this).closest('.list-group-item').remove();
});

额外说明 #

• 选择器#recentList .list-group-item确保我们选中的是主容器下的所有子项元素，事件绑定才能正确触发。
• 使用closest('.list-group-item')找到删除按钮的父级子项，比parent()更可靠——就算后续HTML结构微调，只要父级的class不变，代码依然能正常工作。

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