Hide element by class in pure Javascript

Question

I have tried the following code, but it doesn't work. Any idea where I have gone wrong?

document.getElementsByClassName('appBanner').style.visibility='hidden';

<div class="appBanner">appbanner</div>

Using jQuery or changing the HTML is not possible as I am using [self->webView stringByEvaluatingJavaScriptFromString:@""]; in Objective-C.

getElementsByClassName returns an array of elements. You need something like: document.getElementsByClassName('appBanner')[0].style.visibility='hidden'; — bitfiddler, Aug 24 '13 at 02:45

c.P.u1 · Accepted Answer · 2016-10-16T06:11:59.200

158

document.getElementsByClassName returns an HTMLCollection(an array-like object) of all elements matching the class name. The style property is defined for Element not for HTMLCollection. You should access the first element using the bracket(subscript) notation.

document.getElementsByClassName('appBanner')[0].style.visibility = 'hidden';

Updated jsFiddle

To change the style rules of all elements matching the class, using the Selectors API:

[].forEach.call(document.querySelectorAll('.appBanner'), function (el) {
  el.style.visibility = 'hidden';
});

If for...of is available:

for (let el of document.querySelectorAll('.appBanner')) el.style.visibility = 'hidden';

edited Oct 16 '16 at 06:11

answered Aug 24 '13 at 02:44

c.P.u1

16,664
6
46
41

fedeetz/Atanas Korchev provide a more direct answer 24AUG2013. Preferred. – treeFan Sep 30 '14 at 13:04
Note that this will only hide the first element with class name 'appBanner' – HoffZ Feb 08 '16 at 11:29
4

I would go for `display` instead of `visibility` – Rami Alloush Oct 15 '20 at 19:14

score 48 · Answer 2 · edited Nov 19 '19 at 00:50

48

var appBanners = document.getElementsByClassName('appBanner');

for (var i = 0; i < appBanners.length; i ++) {
    appBanners[i].style.display = 'none';
}

JSFiddle.

edited Nov 19 '19 at 00:50

mattes

8,936
5
48
73

answered Aug 24 '13 at 02:45

federico-t

12,014
19
67
111

I beginner on JS, but why you write `, i;` on first line? This used in for cycle? ( but we declare `i` in cycle later ) Or it small mistake? Or maybe its some "best practice"? Could you comment it, please. – Denis Savenko Jun 10 '16 at 11:52
1

@DenisSavenko it's simply declaring a second var. – Sarima Jul 05 '16 at 14:18
4

@DenisSavenko - It's valid `var` syntax to declare multiple variables separated by commas, but in this case it is a mistake to then *also* declare `i` with `var` in the `for` loop - though this doesn't actually cause an error, it's just untidy. – nnnnnn Oct 07 '16 at 05:19
cute answer bro...i like it – Oct 07 '16 at 05:44

score -2 · Answer 3 · edited Sep 04 '19 at 10:19

-2

Array.filter( document.getElementsByClassName('appBanner'), function(elem){ elem.style.visibility = 'hidden'; });

Forked @http://jsfiddle.net/QVJXD/

edited Sep 04 '19 at 10:19

JON

965
2
10
28

answered Aug 24 '13 at 02:46

servermanfail

2,532
20
21

1

FYI: Array.filter is not a JS function. Looks like this uses Mootools. – Thiago Silva Jun 10 '15 at 17:27
`Array.Filter' doesn't work with Javascript – user4943236 Jan 19 '16 at 08:46

score -4 · Answer 4 · answered Sep 06 '16 at 10:51

-4

<script type="text/javascript">
        $(document).ready(function(){

                $('.appBanner').fadeOut('slow');

        });
    </script>

or

<script type="text/javascript">
        $(document).ready(function(){

                $('.appBanner').hide();

        });
    </script>

answered Sep 06 '16 at 10:51

Ali Güzel

85
12

6

The OP does not mention jQuery – StudioTime Sep 06 '16 at 10:52
– Quang Minh Sep 02 '21 at 10:43

Hide element by class in pure Javascript

4 Answers4

Linked

Related