Hide li with 0 in span

JavaScript
1

Please in pure JavaScript hide li with span value 0. Save Brazil. Thank you very much in advance.

<div id="saved-kangaroo">
<ul>
<li class="help-kangaroo-1"><span>1</span></li>
<li class="help-kangaroo-2"><span>0</span></li>
<li class="help-kangaroo-3"><span>0</span></li>
<li class="help-kangaroo-4"><span>2</span></li>
<li class="help-kangaroo-5"><span>3</span></li>
</ul></div>
2

Why have you given your li’s different classes? Give them all the same class, and then document.selectElementsByClassName('help-kangaroo') will give you a list of the LI’s.

Things that will help you from there:

1 Like
3

Hi @manoodin,

In plain Javascript you could do something like:

var items = document.querySelectorAll('#saved-kangaroo li span');
for(var i = 0; i < items.length; i++) {
    if (items[i].innerText === '0') {
        items[i].parentNode.style.display = 'none';
    }
}
4

Yup, only thing is forEach is an array method so you might have to convert that to an array as I believe selectElementsByClassName returns a node list. I’m not sure since I use querySelectorAll mostly.

5

Everything except IE supports NodeList.prototype.forEach. Because naturally IE.

Unfortunately selectElementsByClassName returns an HTMLCollection instead of a NodeList because… uhhh… yeah.

6

Yup my bad, was thinking map. So while your at it, if you need to, look up polyfill, lol. Or you could map and convert to array. That’s if you care about IE. I wish I didn’t have to.

7

Hi there manoodin,

If you a re going to go with @Andres_Vaquero’s solution - post #3,
then I would suggest that you change this…

items[i].parentNode.style.display = 'none';

…to this…

items[i].parentNode.classList.add( 'remove-li' );

…and add this…

.remove-li {
    display: none;
 }

…to your stylesheet. :wink:

coothead

8

What’s wrong with a good old fashioned for loop, too old fashioned?
Certainly does the job and no need to pollyfill or convert anything.

9

Nothing at all beyond variable scope and a syntax I find easier to read. There also slightly easier to set up(forEach that is), but nope, there fine as well. My build is just set up where I don’t have to worry about poly-fills and the ilk so I never contemplate any pitfalls.

1 Like
10

Yeah I agree.

Nice, but for someone who is a beginner and would not have that kind of setup it is definitely easier to just use a for loop and forget about converting or polly filling, which might end up being a lot more tedious.
This is just a personal preference but I tend to code old fashioned just for the fact that it increases robustness and portability. Of course it is very handy and readable to be able to use just a map, and I cannot deny the pleasure in it :slight_smile: .

11

True BUT, the new syntax isn’t going anywhere and when you work for a muti-media/ tech firm, your kind of expected to use the ‘new shiny’ as much as possible. That and when I comment, I (and it’s just a thing I’ve gotten used to) try to give the answer that would look better on an interview test for job placement. Again, nothing wrong with the tried and trusted for loop, just good to know the modern equivalent.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.