Question

I’ve been trying to get this code to work for the past day whilst searching through these forums but without any success.

I’m looking to hide a container div if one of the div‘s inside has no content.

The script I’ve got is below:

$('.video-centre').each(function(){
  if ($(this).find('.video-thumb p').text().length == "")
    $(this).find('.video-centre').css("display", "none");

});

The HTML that I’m trying to apply this to is below:

<div class="video-centre">
  <div class="video-point">
    <img src="<?php echo get_bloginfo('template_url') ?>/images/video-point.jpg" alt="video pointer" />
  </div>
  <div class="video-thumb">
    <?php the_field('testimonials'); ?>
  </div>
  <p class="video-more">
    <a href="javascript:animatedcollapse.show(['expandable-1'])">View More</a>
  </p>
  <div id="expandable-1">
    <div class="video-thumb">
      <?php the_field('testimonials_hidden'); ?>
    </div>
    <p class="video-close">
      <a href="javascript:animatedcollapse.hide(['expandable-1'])">Close</a>
    </p>
  </div>
</div>

Basically, within wordpress, the client will have the opportunity to add videos, it’s a bit long winded but they get wrapped in p tags. However if they don’t upload anything to a specific area, I would like the container div to have display:none, resulting in only containers being shown if videos have been uploaded.

If there’s an easier way to look at the div and say if it’s empty then get container div to display none I’d be happy to try that.

Answer 1

Use :empty pseudoclass

if ($(this).find('.video-thumb p').is(':empty'))

this checks if you have an empty paragraph (<p></p>), while

if ($(this).find('.video-thumb').is(':empty'))

checks an empty .video-thumb element

---

After your edit: if you have spaces inside div the condition return false so it’s better to simple check

if ($(this).find('.video-thumb p').length === 0)

Example Fiddle : http://jsfiddle.net/6nyF8/6/