Hide set of divs if an inner div contains no text

Question

I am trying to hide a set of divs (which have borders) and are dynamically populated. each of these divs with borders also contain inner divs for title, description and links. I want to hide the outer div so that only when its populated does it become visibe. I am targeting my jquery function at the title class (l2-section-heading) contained inside the div with borders > so that if this class has no text, then the main div that contains it should be hidden.

I have strip-down the html code to just what is required here

$(document).ready(function() {
  $area = $(".l2-webpart"); //this class is for all the outer divs with border 
  $(".l2-section-heading").filter(function() { //targeting the title div
    return $(this).text().trim() == ""
  }) $area.hide()
});

.l2-webpart {
  Background-color: #ffffff;
  color: #000000;
  margin: 1em 1em 0.5em 1em;
  font-family: "Century Gothic";
  padding: 10px;
  box-shadow: 0 0 1px 1px #dddddd;
}

.l2-section-heading {
  font-size: 1.6em;
  color: #022447;
  padding-left: 0.5em;
  text-decoration: underline;
  text-decoration-color: #fe5000;
  margin-bottom: -0.5em;
}

.l2-description {
  font-family: "Century Gothic";
  color: #000000;
  padding: 1em;
}

.l2-links-position {
  list-style-type: none;
  margin-top: -1.9em;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
html:

<!--1st div-->
<div class="row l2-webpart">
  <div class="l2-section-heading">
    Welcome To My Place
  </div>
  <div class="l2-description">
    <p>&#8203;It’s great to have you on board. I am here to help and get you off to a flying start so I have brought together some essential resources to help you. Read on and check out all the links in the pages to find out more, and what it means to be
      part of this big family.&#8203;</p>
  </div>
  <div class="l2-links-position">
    <div class="link-item"><a href="#" title="">My policies</a></div>
  </div>
</div>

<!--2nd div-->
<div class="row l2-webpart">
  <div class="l2-section-heading">

  </div>
  <div class="l2-description">
    <p>&#8203;&#8203;</p>
  </div>
  <div class="l2-links-position">
    <div class="link-item">
      <a href="#" title=""> </a>
    </div>
  </div>
</div>

<!--3rd div-->
<div class="row l2-webpart">
  <!--etc--->
</div>

Answer 1

You can use closest on your filtered results:

$(".l2-section-heading").filter(function() { //targeting the title div
  return $(this).text().trim() === "";
}).closest('.l2-webpart').hide();

.l2-webpart {
  Background-color: #ffffff;
  color: #000000;
  margin: 1em 1em 0.5em 1em;
  font-family: "Century Gothic";
  padding: 10px;
  box-shadow: 0 0 1px 1px #dddddd;
}

.l2-section-heading {
  font-size: 1.6em;
  color: #022447;
  padding-left: 0.5em;
  text-decoration: underline;
  text-decoration-color: #fe5000;
  margin-bottom: -0.5em;
}

.l2-description {
  font-family: "Century Gothic";
  color: #000000;
  padding: 1em;
}

.l2-links-position {
  list-style-type: none;
  margin-top: -1.9em;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--1st div-->
<div class="row l2-webpart">
  <div class="l2-section-heading">
    Welcome To My Place
  </div>
  <div class="l2-description">
    <p>&#8203;It’s great to have you on board. I am here to help and get you off to a flying start so I have brought together some essential resources to help you. Read on and check out all the links in the pages to find out more, and what it means to be
      part of this big family.&#8203;</p>
  </div>
  <div class="l2-links-position">
    <div class="link-item"><a href="#" title="">My policies</a></div>
  </div>
</div>

<!--2nd div-->
<div class="row l2-webpart">
  <div class="l2-section-heading">

  </div>
  <div class="l2-description">
    <p>&#8203;&#8203;</p>
  </div>
  <div class="l2-links-position">
    <div class="link-item">
      <a href="#" title=""> </a>
    </div>
  </div>
</div>