如何在给定特定条件后隐藏标签？

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/