Question

I need to hide div ’email’ content if the div ‘name’ is empty. I did this:

$(document).ready(function() {
    $('.media-contact').each(function() { 
        if ($(this).children('.name').text()===''){
         $(this).children('.email').hide();
        }
    }

});

But this is not working. There will be multiple such media-contacts, and not all will have the name div filled up with a value, so just the static text “Email” shows up and makes it ugly. I want to loop through each media-contact and check if ‘name’ is empty and if it is, then hide ’email’..please help..

<div class="media-contact">
        <div class="name">
            Bill Bero
        </div>
        <div class="title">
            Communications and Media Relations Specialist
        </div>
        <div class="email">
            <a class="rc-link" href='mailto:[e-mail]'><span><img src="/sites/dev/style%20library/images/design/icons/icon_email.png" alt=""/><em>EMAIL</em></span></a>
        </div>
        <div class="phone">
            <span class="baec5a81-e4d6-4674-97f3-e9220f0136c1" style="white-space: nowrap">
            219-661-3099, ext. 2
            </span>
        </div>
    </div>

Answer 1

Try this:

$('.media-contact').each(function() {
    if ($.trim($(this).children('.name').text()) === '') {
        $(this).children('.email').hide();
    }
}​);​

See this jsFiddle example with one name present and the other missing.