如何判断设置<li>为display:none后<ul>元素是否为空？

注意：display: none;仅会让

若需求是判断视觉上无可见

1. 检查
2. 的计算样式，统计可见元素数量：

   const targetUl = document.querySelector('ul');
   const visibleItems = Array.from(targetUl.children).filter(item => {
     const style = window.getComputedStyle(item);
     return style.display !== 'none';
   });
   const isVisuallyEmpty = visibleItems.length === 0;
   

3. 给隐藏的
4. 添加专属类名，通过类名筛选可见元素：

   .visually-hidden { display: none; }
   

   const targetUl = document.querySelector('ul');
   const visibleItems = targetUl.querySelectorAll('li:not(.visually-hidden)');
   const isVisuallyEmpty = visibleItems.length === 0;
   

若需要让

在DOM层面为空，则不能仅用display: none，需直接移除
• 元素：

  const targetUl = document.querySelector('ul');
  // 移除所有隐藏的li
  Array.from(targetUl.children).forEach(item => {
    const style = window.getComputedStyle(item);
    if (style.display === 'none') {
      item.remove();
    }
  });
  // 此时可判断DOM是否为空
  const isDomEmpty = targetUl.children.length === 0;
  

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