如何用JavaScript动态隐藏Server-Sent Events生成的元素？

这问题我太熟了！你遇到的核心问题是：那些带.white类的<li>是SSE异步推送到页面的，当你执行$(".white").hide()的时候，它们还没被添加到DOM里呢，而.not-server-sent是页面初始就存在的元素，所以jQuery能找到并隐藏它。

下面给你两个靠谱的解决方案，按需选择：

方案一：在SSE回调中直接处理新元素（最优解） #

既然元素是SSE推送过来的，那就在接收消息、创建并插入DOM的那一刻，直接判断并隐藏它。这样既高效又不会有延迟，示例代码如下：

// 初始化SSE连接
const eventSource = new EventSource('/your-sse-endpoint');

eventSource.onmessage = function(event) {
  // 假设你的SSE数据包含类名和内容，这里根据实际格式调整
  const data = JSON.parse(event.data);
  // 创建新的<li>元素
  const newListItem = $(`<li class="${data.className}">${data.content}</li>`);
  
  // 把元素插入到目标<ul>中
  $('#server-sent ul').append(newListItem);
  
  // 直接检查并隐藏.white元素
  if (newListItem.hasClass('white')) {
    newListItem.hide();
  }
};

方案二：用MutationObserver监听DOM变化（通用场景） #

如果你没办法修改SSE的回调逻辑，或者需要统一处理所有未来新增的.white元素，可以用浏览器原生的MutationObserver来监听DOM节点的添加，一旦发现新的.white元素就自动隐藏：

// 选择要监听的父容器（SSE元素会被插入到这个<ul>里）
const targetUl = document.querySelector('#server-sent ul');

// 创建观察者实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(function(node) {
      // 只处理元素节点，且带有white类的<li>
      if (node.nodeType === 1 && node.classList.contains('white')) {
        $(node).hide();
      }
    });
  });
});

// 配置观察者：只监听子节点的添加
observer.observe(targetUl, {
  childList: true,
  subtree: false
});

为什么普通的jQuery选择器没用？ #

再啰嗦一句：$(".white")这类选择器是在调用它的瞬间去查询当前DOM中存在的元素，而SSE是异步推送的，元素是在这之后才被插入DOM的，所以自然找不到。

⚠️ 别用setInterval轮询查找元素，这种方法不仅浪费浏览器性能，还可能出现不必要的延迟，完全没必要。

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