Hide parent div if nested div is empty

Question

I am trying to hide the outer div when the nested div is empty (including the space node). I found a solution that works if there are no spaces: Hide parent DIV if <li> Empty

I need it to work when there is empty space, for example:

 

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

Violin example

Answer 1

Working violin

You can use the selector :emptyand :contain():

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

Hope this helps.

$("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>

Run codeHide result

Answer 2

You can iterate over everything div.productand trim the text to remove spaces. If something is left, show it, otherwise hide your wrapper.

$("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>

Run codeHide result

Answer 3

// JQuery

<script>

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

</script>