如果 child 为空，则隐藏主 div

Question

我有这个代码：

<article class="ee-post ">
<div class="content">
<div class="image">
IMAGE
</div>
</div>      
</article>

我需要简单的 JS，如果 .content 为空，它会隐藏或删除类 .ee-post。 如果代码看起来像这样，则函数隐藏/删除：

<article class="ee-post ">
<div class="content"></div>     
</article>

谢谢大家的帮助

Answer 1

您可以为父母使用

:has()

选择器功能；结合孩子的

:empty

选择器。

.ee-post {
  min-width: 200px;
  min-height: 50px;
  border: thin dashed red;
}

.ee-post:has(> .content:empty) {
  display: none;
}

<article class="ee-post">
<div class="content">
<div class="image">
IMAGE
</div>
</div>      
</article>

<article class="ee-post">
<div class="content"></div>     
</article>

如果你想使用JavaScript，你可以尝试以下方法：

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

.ee-post {
  min-width: 200px;
  min-height: 50px;
  border: thin dashed red;
}

.no-content {
  display: none;
}

<article class="ee-post">
<div class="content">
<div class="image">
IMAGE
</div>
</div>      
</article>

<article class="ee-post">
<div class="content"></div>     
</article>

注意： 您可以修改上面的 JS 条件，为没有任何

.content

子元素的帖子添加保护：

if (!(post.querySelector('.content')?.hasChildNodes() ?? true)) {
  post.classList.add('no-content');
}