Question

Suppose I have a vertical menu that is coded like this:

<ul class="sub-menu">
 <li id="menu-item-1" class="menu-item">
  <a href="/page1">Page1</a>
 </li>
 <li id="menu-item-2" class="menu-item">
  <a href="/page2"> </a>
 </li>
 <li id="menu-item-3" class="menu-item">
  <a href="/page3">Page3</a>
 </li>
</ul>

As you can see, the anchor element to page2 doesn’t contain any text. Therefore, I want to hide it from the menu. So I’m looking for a javascript solution that does something like this:

if (content of anchor tag equals " ") then 
set anchor's parent list element css to visiblity:hidden;

Note that I can’t use document.getElementById on this one because the list id’s are automatically generated and may change over time. So how do I get to the content of the anchor tag and set the correct list item’s CSS?

Thanks.

Answer 1

var link=document.getElementsByTagName("a");
for(var i=0;i<link.length;i++)
if(link[i].innerHTML.replace(/^\s+|\s+$/g, "")==='')
link[i].parentNode.style.display="hidden";

Working Demo