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> 

Answer 2

Loop through them each one by one, and check the contents with .text() :

$(".zilla-likes-count").each(function(){
    if ($(this).text() === '0') {
        $(this).hide();
    }
});

Answer 3

You can iterate each matching element and then check its text to see if it exactly matches "0" and hide it if it does.

Here you go:

 $(".zilla-likes-count").each((i,e) => e.textContent === '0' ? $(e).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">0</span> <span class="zilla-likes-count">10</span> <span class="zilla-likes-count">55</span> </a> </div> 

Answer 4

simple.. just iterate over the class array and check if its value contains 0 . so, the code would be like:

$(".zilla-likes-count").each(function(){
    if ($(this).text() === '0') $(this).hide();
});