Make a container display:none when the content of <a> is empty

Im trying to make the following with jQuery.

<ul><br />
<li>div>a>menu item<br />
<li>div>a>menu item<br />
<li>div>a><br />
<li>div>a>menu item<br />
</ul><br />
<br />

When the content开发者_开发技巧 of a> is empty the container li> needs to been on display none.

<br />
<ul><br />
<li>div>a>menu item<br />
<li>div>a>menu item<br />
<li class="hidden">div>a><br />
<li>div>a>menu item<br />
</ul><br />

can anybody help me out?

Sets the css attibute 'display' to 'none' for all li tags which include an empty a tag:

$("ul a:empty").closest("li").css('display','none');

If you want to change the class of the li to hidden you could use:

$("ul a:empty").closest("li").addClass('hidden');

You can use the :empty selector on the <a> and hide the <li>, using .closest() like this:

$("ul a:empty").closest("li").hide();

or :has() like this:

$("ul li:has(a:empty)").hide();

usually this would be done server side, with what ever server side language you use, this will grantee cross browser support.

You do not even need to use jQuery.

I just found this thread searching for a solution to a similar issue, and just implemented and tested a fix in straight CSS with

ul a:empty {display:none !important;} 

Tested with current versions of FF (22), IE (10), Chrome (30) and FWIW, windows version of Safari 5.1.7.

PS: this will work on any empty css selector. Demo using a div:empty in action at http://new.3blindmiceusa.com/products/window-blinds/wood/ in all my shadowbox pop-up windows.

All the images at the top have title elements on the href which are displayed as the title on the image, all the icons in sidebar for pop-up contact forms have no title so the title div with the background remains hidden.

(I know I could have coded this into a custom skin for shadowbox but I tried not to modify that code other than to add the social sharing widget on each photo)