Hiding a span if after data is empty

Question

I have a div structure that I show below, I want to hide the span tag, if the {{xxx}} section is empty, how can I do that? I use jquery, or is there a simple css example?

<div>
    <span class="fa fa-user"></span>  
    {{attendees}}
    <span class="fa fa-money"></span>  
    {{entry_fee}}
</div>

I am using the mustache.js to load the {{xxx}} content.

Refer this SO Answer: http://stackoverflow.com/questions/6027525/how-do-i-accomplish-an-if-else-in-mustache-js — Venkat.R, Dec 08 '15 at 07:17

score -1 · Answer 1 · answered Dec 08 '15 at 07:14

I suggest you to enclose your text nodes into html elements

<div>
  <span class="fa fa-user"></span>
  <span class="for-fa-user">{{attendees}}</span>

  <span class="fa fa-money"></span>
  <span class="for-fa-money">{{entry_fee}}</span>
</div>

<script type="text/javascript">
  var a = document.querySelector(".for-fa-user").innerHTML;
  if (a.trim() === "") {
    document.querySelector(".fa-user").style.display = "none";
  }

  var b = document.querySelector(".for-fa-money").innerHTML;
  if (b.trim() === "") {
    document.querySelector(".fa-money").style.display = "none";
  }
</script>

Hiding a span if after data is empty

1 Answers1