Javascript 如果URL为空，则隐藏li标记

我正在使用以下内容向用户显示facebook和twitter链接

<ul class="list-inline">
  <li style="padding-right:20px;">
    <a href="https://{{channel.facebook_page}}" rel="nofollow" target="_blank" title="{{channel.channel_name}} On FaceBook"><i aria-hidden="true" class="fa fa-facebook fa-2x" style='color:#ee6f00'></i></a>
  </li>
   <li>
   <a href="https://{{channel.twitter_page}}" rel="nofollow" target="_blank" title="{{channel.channel_name}} On Twitter"><i aria-hidden="true" class="fa fa-twitter fa-2x" style='color:#ee6f00'></i></a>
   </li>
</ul>

---

有时我的网站用户没有facebook或twitter帐户。因此，如果

https://

后面的

href

值为空，是否有一种方法隐藏

li

。换句话说，如果我的

{{channel.facebook\u page}

为空，那么隐藏

th li

脚本将是一个明显的解决方案，尽管还有一个

使用CSS属性选择器

[attribute='value']

，并执行类似操作

a[href='https://'] {
  display: none;
}

---

---

对于

li

上的填充设置，在锚点

a

上使用

边距

，您可以单独使用CSS解决这个问题，并获得与隐藏

li

相同的视觉效果。您可以使用@LGSon在CSS中使用的

a[href='https://']

选择器，但在javascript中使用它，然后获取parentElement并将其设置为

display:none

document.querySelectorAll（'[href=“https://”）.forEach（函数（el）{
el.parentElement.style.display='none'；
});





@LGSon的回答是正确的，但他的答案只是隐藏了超链接，而不是它的父项

这将实现以下目的：


//将所有在“https://”之后没有任何内容的超链接获取到一个数组中，并循环该数组
Array.prototype.slice.call（document.querySelectorAll（“a[href='https://']））.forEach（函数（链接）{
link.parentElement.classList.add（“隐藏”）；
});
.hidden{display:none；}/*将此类添加到任何应隐藏的元素中*/



不知道您使用的模板框架，我将尝试一下，并根据您的个人资料中的标记猜测角度

如果元素的计算结果是真实的，则可以使用Angular's with来显示该元素

<li 
  ng-if="channel.facebook_page"
  style="padding-right:20px;">
    <a href="https://{{channel.facebook_page}}" rel="nofollow" target="_blank" title="{{channel.channel_name}} On FaceBook"><i aria-hidden="true" class="fa fa-facebook fa-2x" style='color:#ee6f00'></i></a>
</li>



应该是
li
though谢谢兄弟，但是当另一个人发现我在使用angular时，他给了我一个很好的解决方案，但是谢谢你的回答什么是{…}框架？是的，我在使用angular，你的回答很有效，非常感谢。