Hide numbers with javascript, without using jQuery

Question

When you click the Hide button the numbers 2, 3 and 1 are hidden. All works great using this Jquery code:

$( "#hide" ).click(function() {
   $('span').each(function(){
   if($(this).text().match(/^([1-9])$/))$(this).hide()
});

});

Now I want the same thing, but with using a good old javascript function instead of the jQuery solution given above. How to do this? See my (not working) attempt here.

Many thanks

wrap code in head .It works --> jsfiddle.net/cse_tushar/WnLUu/5 — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Oct 27, 2013 at 13:12
@TusharGupta There's still jQuery in that code. $('span').each(function () { — user2824854
– user2824854, Commented Oct 27, 2013 at 13:15
@VilleRouhiainen I know that.That's why i posted it as comment not as an answer . — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Oct 27, 2013 at 13:16

techfoobar · Accepted Answer · 2013-10-27 13:21:55Z

2

Here is a simple vanilla JS version:

function hide() {
    var spans = document.getElementsByTagName('span'), i = 0;
    for(i=0; i<spans.length; i++) {
        spans[i].style.display = (spans[i].innerText.match(/^[1-9]+$/) ? 'none' : '');
    }
}

Note: I've corrected your regex to match numbers with more than 1 digit in it.

Updated fiddle: http://jsfiddle.net/WnLUu/6/

edited Oct 27, 2013 at 13:21

answered Oct 27, 2013 at 13:14

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wagner DosAnjos Over a year ago

.innertText is not available on all browsers, if .innerText === undefined you should use .textContent instead.

Maurice Over a year ago

Thanks! Just out of curiosity, how would I make them visible again if I had another button called: Show? With Jquery you can simply use show.

techfoobar Over a year ago

With vanilla Js, you can just as easily do: yourSpan.style.display = 'inline';

w3re · Accepted Answer · 2013-10-27 13:14:14Z

0

In plain javascript you could access the style attribute, so instead of $(this).hide() you could call

this.style.visibility = "hidden"

answered Oct 27, 2013 at 13:14

w3re

5824 silver badges12 bronze badges

Comments

Justin McCraw · Accepted Answer · 2013-10-27 13:18:42Z

0

Maybe something like this.

function buttonClicked(evt) {
    var spans = document.getElementsByTagName("span");
    for (var i = 0, length = spans.length; i < length; ++i) {
        if (/^([1-9])$/.test(spans[i].innerHTML)) {
             spans[i].style.display = "none";
        }
    }
};


document.getElementById("hide").addEventListener("click", buttonClicked, false);

answered Oct 27, 2013 at 13:18

Justin McCraw

61212 silver badges25 bronze badges

Comments

Wagner DosAnjos · Accepted Answer · 2013-10-27 13:33:24Z

0

Please try this (works on IE and other browsers, .innerText is IE specific):

function hide() {
    var spans = document.getElementsByTagName('SPAN');

    for (var i=0; i < spans.length; i++) {
        alert(spans[i].textContent);
        if (spans[i].textContent !== undefined && spans[i].textContent.match(/^[1-9]$/))
            spans[i].style.display = 'none';
        else if (spans[i].innerText !== undefined && spans[i].innerText.match(/^[1-9]$/)) // IE
            spans[i].style.display = 'none';
    }
}

answered Oct 27, 2013 at 13:33

Wagner DosAnjos

6,3841 gold badge18 silver badges30 bronze badges

Collectives™ on Stack Overflow

Hide numbers with javascript, without using jQuery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related