How to hide "span" if it text is "0" using jQuery?

Question

I'm looking to hide spans that contain a 0. I've looked at other code and I've tried to adapt it but I can't get it to work correctly. I want it to only hide the span when the contents is a "0", but when running the code below it also hides any number that contains 0, so 10 for example, which I don't want.

Just to make it a little clearer, the span should only display if the number inside it is greater than 0 (it's a counter that starts from 0 so can't be less than 0 anyway).

Any help is appreciated.

HTML

<div id="post-excerpts-likes">
    <a href="#" class="zilla-likes" id="zilla-likes-175519" title="Like this">
        <span class="zilla-likes-count">0</span>
    </a>
</div>

jQuery

$(".zilla-likes-count:contains('0')").hide();

---

Please also note that there are going to multiple spans on the page all with the same class, I would like the code to affect them all.

Answer 1

You need to select element has exactly equal text but the :contains() isn't what you want. The .filter() is a good function to filtering selected element based on it text.

$(".zilla-likes-count").filter(function(){
  return $(this).text().trim() === "0";
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-excerpts-likes">
    <a href="#" class="zilla-likes" id="zilla-likes-175519" title="Like this">
        <span class="zilla-likes-count">Text0Text</span>
        <span class="zilla-likes-count">0</span>
    </a>
</div>