点击recentList的glyphicon-star按钮删除starredList对应list-group-item的问题

我明白你的问题啦——当starredList里有多个列表项时，原来的代码没法精准匹配并删除对应的项，这是因为你之前的写法有两个关键问题：

问题分析 #

1. 语法错误：你的选择器$(#starredList)缺少引号，正确的应该是$('#starredList')，不然浏览器会把它当成未定义变量报错。
2. 文本匹配逻辑错误：直接调用$('#starredList').children('.list-group-item').children('.a-file').text()会返回所有.a-file元素的文本拼接结果（比如两个项会得到message.txttestcase.txt），根本没法和单个文件名做精确匹配。

正确的解决方案 #

我们需要逐个检查starredList里的每个列表项，找到文件名匹配的项再删除，用jQuery的.filter()方法就能轻松实现：

// 给所有星星按钮绑定点击事件
$('.btn-star').on('click', function() {
    // 获取当前点击项的文件名（trim去掉可能的空格）
    const targetFileName = $(this).closest('.list-group-item').find('.a-file').text().trim();
    
    // 筛选starredList中文件名匹配的列表项并删除
    $('#starredList .list-group-item').filter(function() {
        const currentFileName = $(this).find('.a-file').text().trim();
        return currentFileName === targetFileName;
    }).remove();
});

代码解释 #

• .closest('.list-group-item')：找到当前按钮所在的父级列表项，确保我们拿到的是正确的文件名。
• .filter()：遍历starredList里的每个列表项，检查其中的.a-file文本是否和目标文件名完全一致，匹配到的项会被收集起来，最后调用.remove()删除。
• 加上.trim()是为了避免文件名前后的空格导致匹配失败，让判断更精准。

如果你偏好更直观的遍历写法，也可以用.each()实现同样的效果：

$('.btn-star').on('click', function() {
    const targetFileName = $(this).closest('.list-group-item').find('.a-file').text().trim();
    $('#starredList .list-group-item').each(function() {
        if ($(this).find('.a-file').text().trim() === targetFileName) {
            $(this).remove();
        }
    });
});

这样不管starredList里有多少个列表项，都能精准找到并删除对应文件名的项啦～

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