如果嵌套的div为空，则隐藏父级div

Question

当嵌套的div为空（包括空格节点）时，我想隐藏外部div。如果没有空格，则已找到解决方案：

Hide parent DIV if <li> is Empty

但是，我需要在存在空格时也能使用，例如：

  <div class="gen-customer">
    <div class="wrapper">
      <div class="heading">Hidden if working 1</div>
       <div class="content">
      <div class="product"> </div>
    </div>
   </div>
 </div>

Example fiddle

- caseyz

Answer 1

这里是可运行的示例

您可以使用:empty和:contain()选择器：

$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide();

希望这能帮到你。

$("div.product:contains(' '), div.product:empty").closest('div.wrapper').hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
  <div class="wrapper">
    <div class="heading">Hidden if working 1</div>
    <div class="content">
      <div class="product"> </div>
    </div>
  </div>
</div>

<div class="gen-customer">
  <div class="wrapper">
    <div class="heading">Visible if working 2</div>
    <div class="content">
      <div class="product">text</div>
    </div>
  </div>
</div>

<div class="gen-customer">
  <div class="wrapper">
    <div class="heading">Hidden if working 3</div>
    <div class="content">
      <div class="product"></div>
    </div>
  </div>
</div>

- Zakaria Acharki

---

这很好用！其他浏览器也可以工作。我也想使用trim方法，但这似乎更接近我的原始问题。谢谢。 - caseyz

Answer 2

你可以迭代每个 div.product 并修剪文本以删除空格。如果还有任何内容，请显示它，否则隐藏其包装器。

$("div.product").each(function() {
  if ($(this).text().trim() == '') {
    $(this).closest('div.wrapper').hide()
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gen-customer">
  <div class="wrapper">
    <div class="heading">Hidden if working 1</div>
    <div class="content">
      <div class="product"></div>
    </div>
  </div>
</div>

<div class="gen-customer">
  <div class="wrapper">
    <div class="heading">Visible if working 2</div>
    <div class="content">
      <div class="product">text</div>
    </div>
  </div>
</div>

<div class="gen-customer">
  <div class="wrapper">
    <div class="heading">Hidden if working 3</div>
    <div class="content">
      <div class="product"></div>
    </div>
  </div>
</div>

- sideroxylon

Answer 3

//使用Jquery尝试一下

<script>

    //A perfect reference in Jquery...
    var element=$('#target_child');
    if($(element).html()==''){
        $(element).parent().hide()
    }else{
        //do some work
    }

</script>

- Dennisrec