How do I hide span with a value less than 1 in html

Question

I have never done this but just wondered how I can hide the notification bubble when the value becomes less than one(1). So far, then notification displays well with the code provided.

<a class="fa fa-globe">
      <a href="#"> Notification</a>
      <a href="#"> <span class="fa fa-comment">{{=len(rows2)}}</span></a>
      <!--span class="num">2</span-->
    </a>
    </a>
<style>
  a.fa-globe {
    position: relative;
    font-size: 1.2em;
    color: #38D9D6;
    cursor: pointer;
  }
  span.fa-comment {
    position: absolute;
    font-size: 0.8em;
    top: -3px;
    color: red;
    right: 2px;
    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 8px Verdana;
  }
</style>

Why do you have links nested inside links? Also you have one more closing tag than you have opening tags. — ecg8, Oct 13 '19 at 23:53

EGC · Accepted Answer · 2019-10-14T01:26:50.723

Using JQuery is probably the best solution here. Although, feel free to attempt to implement the following examples too.

The solution:

var spanValue = parseInt($('.num').text());
if(spanValue < 1) { $('.num').addClass('hidden'); }

 div.fa-globe {
    position: relative;
    font-size: 1.2em;
    color: #38D9D6;
    cursor: pointer;
  }
  span.fa-comment {
    position: absolute;
    font-size: 0.8em;
    top: -3px;
    color: red;
    right: 2px;
    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 8px Verdana;
  }

 
 .hidden {
   display:none;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fa fa-globe">
  <a href="#"> Notification</a>
  <a href="#"> <span class="fa fa-comment">{{=len(rows2)}}</span></a>
  <span class="num">0</span>    
</div>

Alternatives you can investigate: (but have not been tested)

CSS: Selecting text nodes (as with XPath’s text())

span.num[contains(text(),'0')] {
   display:none;
 }

Is there a CSS selector for elements containing certain text?

$('td:contains("0")') { $(this).addClass('hidden); }

Access span text from css

<span data-text="0"></span>

span[data-text="0"]:before {
  content: attr(data-text);
  display:none;
}

Well, you're not wrong. I overlooked that in my edit, thanks. Code has been updated. — EGC, Oct 14 '19 at 01:27

How do I hide span with a value less than 1 in html

1 Answers1