如何检测所有通知元素隐藏后自动隐藏通知托盘容器？

问题背景 #

开发通知托盘组件时，单条通知关闭后仅隐藏了对应通知项，所有通知清空后外层托盘容器仍停留在页面上：

• 预期正常显示效果：
• 异常残留效果：

当前单条通知关闭逻辑、HTML结构如下：

现有移除函数 #

function removeNoti(btn) {
  btn.style.display = "none";
}

现有DOM结构 #

<div id="noti-tray-wrapper">
  <div class="notification" onclick="removeNoti(this)">
    <div class="noti-tray">You have unread messages </div>
    <div class="noti-tray-btn" id="n1">x</div>
  </div>
  <div class="notification" onclick="removeNoti(this)">
    <div class="noti-tray">You have unread messages </div>
    <div class="noti-tray-btn" id="n2">x</div>
  </div>
  <div class="notification" onclick="removeNoti(this)">
    <div class="noti-tray">You have unread messages </div>
    <div class="noti-tray-btn" id="n3">x</div>
  </div>
  <div class="notification" onclick="removeNoti(this)">
    <div class="noti-tray">You have unread messages </div>
    <div class="noti-tray-btn" id="n4">x</div>
  </div>
</div>

实现逻辑 #

每次执行单条通知隐藏操作后，检查外层托盘容器内是否还存在可见的通知项，当可见通知数量为0时，直接隐藏外层托盘容器即可。
修改后的完整移除函数：

function removeNoti(btn) {
  // 隐藏当前点击的通知项
  btn.style.display = "none";

  const tray = document.getElementById('noti-tray-wrapper');
  // 筛选出容器内所有仍处于显示状态的通知
  const visibleNotis = Array.from(tray.querySelectorAll('.notification'))
    .filter(item => window.getComputedStyle(item).display !== 'none');

  // 无可见通知时隐藏整个托盘
  if (visibleNotis.length === 0) {
    tray.style.display = 'none';
  }
}

注意：不要直接通过.notification选择器返回的节点总数判断，必须过滤掉已经设置display:none的隐藏元素，避免统计错误。如果后续需要重新显示托盘（比如收到新通知时），记得同时把托盘的display属性重置为对应显示值即可。

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