How to hide a tag after given speciffic condition?

Question

I have this Handlebars template:

<div class="card-body">          
  <h5 class="card-title"><i class="fa fa-users" aria-hidden="true"></i> {{ this.group }}
    <i class="fa fa-user" aria-hidden="true"> </i> {{ this.name }} {{ this.lastName }}
  </h5>
  <a href="https://wa.me/{{ this.phone }}"><i class="fa fa-whatsapp" aria-hidden="true"></i> {{ this.phone }}</a><br>
  <i class="fa fa-home" aria-hidden="true"></i> {{ this.address }} <br>
  <a href="mailto:{{ this.email }}"><i class="fa fa-envelope" aria-hidden="true"></i> {{ this.email }}</a> 
  <br>          
  <hr>
  <p class="card-text">  
    <a class="facebook" href="https://www.facebook.com/{{ this.facebook }}" > <i class="fa fa-facebook" aria-hidden="true"></i></a>
    <a href="https://www.instagram.com/{{ this.instagram }}" ><i class="fa fa-instagram" aria-hidden="true"></i></a>
    <a href="https://twitter.com/{{ this.twitter }}"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    <a href="https://www.linkedin.com/in/{{ this.linkedIn }}"><i class="fa fa-linkedin" aria-hidden="true"></i></a><br>                
  </p>
</div>

And I want to hide all "a" tags that won't get a "href" value.

I've tried this, for instance-

<script>                           
    if (!document.getElementsByClassName("facebook").value) {      
      $(".facebook").hide();
    }    
</script>

But it hides all "a" tags, no matter if the comply with the condition or not. I'm guessing that it must be something to do with iterate each generated tag, but I can't figure out how to target them.

Answer 1

You can to it using each :

$("a").each(function() {
    if($(this).attr("href") == "") {
        $(this).hide();
    }
});

Learn more: https://api.jquery.com/each/