如果网址为空，则隐藏li标签

Question

I am using the following to show a users facebook and twitter links.

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

Sometimes my site users don't have facebook or twitter accounts. So is there a way of hiding the li if the href value after the https:// is empty. In other words if my {{channel.facebook_page}} is blank hide th li .

Answer 1

A script would be one obvious solution, though there is one more.

Use the CSS attribute selector [attribute='value'] , and do something like this.

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

---

And for the padding set on the li , use a margin on the anchor a instead, and you can solve this with CSS alone, and get the same visual result as hiding the li .

Answer 2

Not knowing what framework you are using for templating I will take a stab at it and guess Angular based on your tags in your profile.

You can use Angular's with ng-if to show the element if it evaluates to be truthy

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

Answer 3

You could do the a[href='https://'] selector that @LGSon used in his CSS, but use it in your javascript, then get the parentElement and set it to display: none

 document.querySelectorAll('[href="https://"]').forEach(function(el) { el.parentElement.style.display = 'none'; }); 

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

Answer 4

@LGSon is on the right track, but his answer only hides the hyperlink, not the li parent of it.

This would do the trick:

 // Get all the hyperlinks that don't have anything after "https://" into an array and loop the array Array.prototype.slice.call(document.querySelectorAll("a[href='https://']")).forEach(function(link){ link.parentElement.classList.add("hidden"); }); 

 .hidden { display:none; } /* Add this class to any element that should be hidden */ 

 <ul class="list-inline"> <li><a href="https://something">Link 1</a></li> <li><a href="https://">Link 2</a></li> </ul> 

NOTES:

• .forEach() is not universally supported on node lists in all current browsers, so converting the node list returned by .querySelectorAll() is required to ensure cross-browser support.
• It is generally better to work with CSS classes, rather than adding/removing inline styles. This promotes more reusability and less code redundancy. Use the element.classList property for easy access.