Drupal/Jquery: hide parent div if child is empty

Question

I am having difficulty working this out. What I wish to achieve is when works-left and works-right are empty (keeping in mind it functions using drupal pre-processed code) the parent div (latest-works-container) will disappear.

I was wondering if there were somesort of solution to the problem. The thing that came to me was editing the template.php code that is found in bartik, or some other possible solution?

function hybrid_preprocess_html(&$variables) {
  if (!empty($variables['page']['featured'])) {
    $variables['classes_array'][] = 'featured';
  }

  if (!empty($variables['page']['services_first'])
    || !empty($variables['page']['services_second'])
    || !empty($variables['page']['services_third'])
    || !empty($variables['page']['services_fourth'])) {
    $variables['classes_array'][] = 'services';
  }  


    <div id="latest-works-container"><!--latest-works-container-->
      <div id="latest-works"><!--latest-works-->
        <div class="works-left">
            <?php print render($page['portfolio_works_first']); ?>
       </div>  
       <div class="works-right">
            <?php print render($page['portfolio_works_second']); ?>
       </div>  
       <div class="works-left">
            <?php print render($page['portfolio_works_third']); ?>
       </div> 
       <div class="works-right">
            <?php print render($page['portfolio_works_fourth']); ?>
       </div> 
      </div><!--/latest-works-->
    </div><!--/latest-works-container--> 

Answer 1

Your element content comes from PHP, so you have no need to remove div using jQuery.

Instead, you should edit your view file. So for example you have you render() method, which gives your the content of div.

$contentBlockFirstLeft = render($page['portfolio_works_first']);
$contentBlockSecondLeft = render($page['portfolio_works_third']);
$contentBlockFirstRight = render($page['portfolio_works_second']);
$contentBlockSecondRight = render($page['portfolio_works_fourth']);

$isLeftBlockEmpty = empty($contentBlockFirstLeft) && empty($contentBlockSecondLeft);
$isRightBlockEmpty = empty($contentBlockFirstRight) && empty($contentBlockSecondRight);

$showAllBlocks = true;
if ($isLeftBlockEmpty && $isRightBlockEmpty) {
    $showAllBlocks = false;
}

So you already know all needed information to output your elemnt, so for example you will have next view. Please feel free to change variable names according to business logic needed, those are just dummy names.

<?php if ($showAllBlocks): ?>
  <div id="latest-works-container"><!--latest-works-container-->
    <div id="latest-works"><!--latest-works-->
      <div class="works-left">
        <?php echo $contentBlockFirstLeft; ?>
      </div>  
      <div class="works-right">
        <?php echo $contentBlockFirstRight; ?>
      </div>  
      <div class="works-left">
        <?php echo $contentBlockSecondLeft; ?>
      </div> 
      <div class="works-right">
        <?php echo $contentBlockSecondRight; ?>
      </div> 
    </div><!--/latest-works-->
</div><!--/latest-works-container--> 
<?php endif; ?>