从数组中过滤HTML：点击切换时无法移除数组对应内容的问题

嘿，我一眼就瞅出问题所在了！你添加元素到数组时的字符串和移除时比对的字符串根本不是同一个，所以filter方法找不到要移除的项，自然就无效啦。

问题根源 #

你点击.star添加时，把父元素的HTML包裹在了转义后的<div>标签里：

starred_messages.push("<div class='clearfix'>"+starred_msg+"</div>");

这里的<和>是<和>的HTML转义字符，所以数组里存的是转义后的完整字符串。

但点击.starred移除时，你直接拿的是原始的父元素HTML：

var starred_msg = $(this).parent().html();
starred_messages = starred_messages.filter(e => e !== starred_msg);

这个starred_msg是未经转义的，而且也没有包裹外层的.clearfix转义标签，和数组里的项完全不匹配，过滤当然没用。

解决方案1：统一字符串格式（快速修复） #

移除时也拼接出和添加时完全一致的转义字符串，这样就能匹配上了：

$(document).on('click', '.starred', function () {
  var starred_msg = $(this).parent().html();
  // 拼接成和添加时一模一样的转义字符串
  var targetItem = "<div class='clearfix'>"+starred_msg+"</div>";
  starred_messages = starred_messages.filter(e => e !== targetItem);
  console.log(starred_messages);
  $(this).toggleClass('starred star');
});

解决方案2：用唯一ID替代HTML字符串（更可靠的方案） #

匹配HTML字符串其实很脆弱——浏览器可能会自动调整HTML的格式（比如空格、换行、标签补全），导致看起来一样的HTML实际字符串有差异。更稳妥的方式是给每个聊天项加一个唯一标识，比如data-id属性：

首先给父元素添加唯一ID：

<!-- 给每个聊天项的父元素加data-id，值要唯一 -->
<div class="chat-message" data-id="msg-001">
  <span class="chat-img pull-left">...</span>
  <button class="star">⭐</button>
</div>

然后修改JS逻辑，通过ID来管理数组：

var starred_messages = [];

// 合并两个点击事件，逻辑更集中
$(document).on('click', '.star, .starred', function () {
  var $parent = $(this).parent();
  var msgId = $parent.data('id');
  var msgHtml = "<div class='clearfix'>"+$parent.html()+"</div>";

  if ($(this).hasClass('star')) {
    // 收藏：添加带ID的对象到数组
    starred_messages.push({ id: msgId, html: msgHtml });
  } else {
    // 取消收藏：通过ID过滤移除
    starred_messages = starred_messages.filter(item => item.id !== msgId);
  }

  // 切换按钮样式
  $(this).toggleClass('star starred');
  console.log(starred_messages);
});

这种方式完全避免了HTML字符串匹配的坑，而且后续如果需要对收藏的消息做其他操作（比如编辑、排序）也更灵活。

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