title: Hide div blocks if child p tags are empty
body: <p>I'm working on a <a href="https://codyhouse.co/gem/vertical-timeline/" rel="nofollow noreferrer">vertical timeline</a> and I have three categories of events: national, international and obituaries, each of which is specified by classes of the same name. The structure of a div block is as follows:</p>
  
  <pre><code>&lt;div class="cd-timeline__block js-cd-block"&gt;
  &lt;div class="cd-timeline__img cd-timeline__img--location js-cd-img"&gt; 
  &lt;img src="img/cd-icon-location.svg" alt="Location"&gt;
  &lt;/div&gt;
  &lt;div class="cd-timeline__content js-cd-content"&gt;
  &lt;p class="National List"&gt;The Election Commission recommends to the President the disqualification of 20 AAP MLAs in Delhi&lt;/p&gt;           
  &lt;span class="cd-timeline__date"&gt;Jan. 19&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>If the user selects 'National' events in a dropdown (which is part of the UI), a Javascript functions automatically hides the other two category events like this: </p>
  
  <pre><code>$('#newscategory').on('change', function(){
          if(this.value=="Nat"){
              $('.National').show();
              $('.International').hide();
              $('.Obituaries').hide();
          }
  });
  </code></pre>
  
  <p>However, if there are no 'National' events present on a particular date, the container surrounding the p tags does not get hidden. I want the timeline to skip that date altogether, which means I want to hide the parent div with class="cd-timeline__block js-cd-block" if the p tags are hidden. How can I achieve this? 
  Another problem is that there are hundreds of events on the page. </p>
  
  <p>An example of the code can be <a href="http://interactive.thehindu.com/archive/dashboards/2018/vtimeline/index4.html" rel="nofollow noreferrer">found here</a></p>