Hiding multiple elements when CSS changes

I have a few buttons I am using as tags. I would like to check whether the tags are visible and if ALL tags are hidden, then hide the clear selection link. MY HTML IS:

 <div class="col-xs-12 col-sm-5 cols">
      <div id="tags">
      <button type="button" class="btn btn-default usertitle-tag hide-tag tg-btns">x &nbsp;&nbsp;Usertitle</button>
      <button type="button" class="btn btn-default comments-tag hide-tag tg-btns">x &nbsp;&nbsp;Comments</button>
      <button type="button" class="btn btn-default topics-tag hide-tag tg-btns">x &nbsp;&nbsp;Topics</button>
      <button type="button" class="btn btn-default login-tag hide-tag tg-btns">x &nbsp;&nbsp;Login</button>
    </div>
       <a href="#" class="cancel clear">Clear selection</a>
        </div> <!--/.col-xs-12-->

I have tried this with jquery but the clear selection is still visible. Where am I going worng?

$('.hide-tag').each(function(){
     if ( $(this).css('display') == 'none'){
       $(".clear").hide();
    }
 });

Answers


You can set the visibility to true if at least one hide-tag is visible like

$(".clear").toggle($('.hide-tag').is(':visible'));

Need Your Help

hasNextInt() From Scanner behaving weirdly

java user-input java.util.scanner

I have a very simple loop that waits for a number (int) and as long as that number is not exitOption it does not leave the loop, however I get an unexpected error, and I don't know what's causing i...

Excel VBA: Replace first row by an array

arrays excel vba replace

I have a first row with 100 cells and I created an Array of Strings, which represent the new row content.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.