javascript - 通过 Javascript 根据内容更改元素 css

Question

假设我有一个垂直菜单，其编码如下:

<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>

如您所见，page2 的 anchor 元素不包含任何文本。因此，我想从菜单中隐藏它。所以我正在寻找一个 javascript 解决方案，它可以执行以下操作:

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

请注意，我无法在此使用 document.getElementById，因为列表 ID 是自动生成的，并且可能会随着时间的推移而改变。那么如何获取 anchor 标记的内容并设置正确的列表项的 CSS？

谢谢。

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