Question

我正在寻找一个Jquery或CSS解决方案。当div.formHelp中没有文本内容但仍然在div.arrow里面时，我想删除或不显示div中的div及其内容。例如（不应该显示）：

<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

如果要隐藏的div中有 no 文本内容，这很简单：将元素text()，然后trim()取出空格，并看看是否还剩下什么。如果没有，您可以删除或隐藏元素。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

（如果您希望隐藏不包含任何文本的div，但包含做的子节点的div），则会更复杂一些;在这种情况下，您可以d需要根据节点类型过滤内容，如@ gaetanoM的答案。）

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

另外，如下所示，您可以使用

div:empty {
  display: none;
}

当没有文本内部但使用CSS或Jquery在内部有另一个div时删除div

2 个答案: