Hide <li> when href is empty

Question

I want to hide any LI in .social-menu that have blank hrefs.

I originally had:

$('ul.social-menu li a[href*=""]').hide();

But it only hides the link.

I thought perhaps instead I could use:

$('ul.social-menu li a[href*=""]').addClass('hidden')

But it is not adding the class hidden.

The HTML is:

<ul class="social-menu">
   <li class="facebook"><a target="parent" href=""></a></li>
   <li class="twitter"><a target="parent" href="http://twitter.com/#!/dft_au">Twitter</a></li>
</ul>

Answer 1

Use the :has() selector or the has() method to select all <li> elements that contain an anchor (<a>) with an empty href attribute value:

$('ul.social-menu li:has(a[href=""])').hide();
// or…
$('ul.social-menu li').has('a[href=""]').hide();

Note that .has() is more efficient than :has(): http://jsperf.com/jquery-has-vs-has Although :has() is slightly more readable IMHO.