当没有文字的文字时，请删除DIV，但使用CSS或jQuery具有另一个DIV

Question

我正在寻找jQuery或CSS解决方案。我想删除或不显示DIV，当Div.FormHelp中没有文本内容但内部仍然有Div.Rarow时，它是DOM中的内容。例如(不应该显示(：

<div class="formHelp animated bounceInRight">
<div class="arrow"></div>
</div>

示例2(由于里面有内容，应显示：

<div class="formHelp animated bounceInRight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id congue libero, non porttitor ligula.
<div class="arrow"></div>
</div>

Answer 1

如果您要隐藏的divs中有 no 文本内容，这很简单：拿起元素的text()，然后 trim() out thewitespace，看看是否有剩下的一切。如果没有，您可以删除或隐藏元素。

$('.formHelp').each(function() {
  if ($(this).text().trim().length === 0) {
    $(this).hide();
  }
});

.formHelp {border: 1px solid}
.arrow {
  border: 1px solid #F00;
  width: 20px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formHelp animated bounceInRight">
  <!-- no contents -->
  <div class="arrow"></div>
</div>
<div class="formHelp animated bounceInRight">
  Has contents
  <div class="arrow"></div>
</div>

(相反，如果您想隐藏不包含文本的Divs，但包含 do 的子节点的文本，它会变得更加复杂；在这种情况下，您需要按照 @gaetanom的答案中的节点类型过滤内容。(

Answer 2

您可以这样做，但是您需要像document.onload一样使用侦听器。由于它只是片段，因此无法使用它。所以不要忘记它。

let divs = [...document.querySelectorAll('div')];
  console.log(divs);
  divs.forEach((e)=>{
    if (!e.innerHTML) {
      e.classList.add('none');
    }
});

div {
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  background-color: blue;
  color: white;
}
.none {
  display: none;
}

<div>Here is a text</div>
<div></div>

也可以在下面发现的那样，您可以使用

div:empty {
  display: none;
}