How do I hide a parent div if the child div doesn't contain an tag?

Question

I\'m trying to hide a parent div (i.e., #post) if the child div (i.e., .post-title) doesn\'t contain an tag. Any insight in how to accomplish this correct

Answer 1

You can simply use jQuery's .filter

Like so:

$('.post-title').filter(function(i) { return !$(this).find('a').length }).hide();

See example below

$('.post-title').filter(function(i) { return !$(this).find('a').length }).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="latest">
    <div id="post">
        <div class="post-image post-image-1"></div>
        <div id="post-content">
            <div class="post-title post-title-1"><a href="javascript:void">Link here</a></div>
            <div id="post-date"></div>
        </div>
    </div>
<div id="post">
        <div class="post-image post-image-2"></div>
        <div id="post-content">
            <div class="post-title post-title-2">NO LINK</div>
            <div id="post-date"></div>
        </div>
    </div>
</div>
<div id="latest">
    <div id="post">
        <div class="post-image post-image-1"></div>
        <div id="post-content">
            <div class="post-title post-title-1">NO LINK</div>
            <div id="post-date"></div>
        </div>
    </div>
<div id="post">
        <div class="post-image post-image-2"></div>
        <div id="post-content">
            <div class="post-title post-title-2"><a href="javascript:void">Link here</a></div>
            <div id="post-date"></div>
        </div>
    </div>
</div>

Answer 2

Firstly: dont use IDs mulitple times. Every ID should be unique :)

Secondly: $('.post').not( ':has(".post-title a")' ).addClass('hide')

Answer 3

Note: It's a crime to duplicate the ids.

Answer 4

Just use jQuery's toggle using a boolean from checking the length of the children:

/* Loop Through Parents */
$('#post').each(function() {
    $(this).toggle($(this).children('a').length > 0);
});