当子项不为空时隐藏元素答案

【问题标题】：Hide element when child is not empty当子项不为空时隐藏元素
【发布时间】：2023-02-23 01:41:40
【问题描述】：

你能帮我解决小问题吗？我需要隐藏 div，但如果为空，我需要添加新类 .no-content

我有这个带空格的代码：

<div class="ee-posts-list">       
<div class="ee-post ">                    </div>
<div class="ee-post ">                    </div>
<div class="ee-post ">                    </div>
<div class="ee-post ">                    </div>
</div>

如果 div 没有文本，我需要添加类：

<div class="ee-posts-list">       
<div class="ee-post no-content">                    </div>
<div class="ee-post no-content">                    </div>
<div class="ee-post no-content">                    </div>
<div class="ee-post no-content">                    </div>
</div>

对于我需要保留的类似问题，我使用了这个脚本

<script>
document.querySelectorAll('.ee-post').forEach(post => {
  if (!post.querySelector('.breakdance').hasChildNodes()) {
    post.classList.add('no-content');
  }
});
</script>

也许只是编辑这个脚本

多谢

【问题讨论】：

标签： javascript class display

【解决方案1】：

使用.innerHTML.trim()。这将删除周围空白的内容，因此对于您的示例中的空白 div，它将是空的。

document.querySelectorAll('.ee-post').forEach(post => {
  if (post.querySelector('.breakdance').innerHTML.trim() == '') {
    post.classList.add('no-content');
  }
});

【讨论】：