Hide a CSS class only on homepage

Question

I'm trying to hide this class "mediad rh-flex-right-align" from my header only on HomePage. This class must appear on every other page.

I tried Javascript to achieve this, but it's not working so I probably made a mistake in these lines:

if (document.url == "https://www.comparer-acheter.fr/")
{
document.getElementsByClassName("mediad rh-flex-right-align")
[0].style.display = 'none';
}

Any suggestion is welcome to hide a CSS class on Homepage

It would be easier to just include css or js in the home page that hides it. — Reinstate Monica Cellio, May 18 '18 at 10:04
@Abinthaha Don't be that guy. https://www.doxdesk.com/img/updates/20091116-so-large.gif — Reinstate Monica Cellio, May 18 '18 at 10:04
You need to provide a **clear problem statement**, which "not working" is not. What, precisely, isn't working (you've got two separate statements in your code, which one doesn't do what you expect)? Are there any error messages? If you add a logging statement, can you confirm what the value of `document.url`? Is it what you expect? Do you enter the `if` statement? — Quentin, May 18 '18 at 10:04

Ebatsin · Accepted Answer · 2018-05-18T12:22:15.903

5

There is no url attribute in document but there is a URL one.

So you can either use document.URL or window.location.href.

I've had problems with document.URL in the past so prefer the second one.

Edit : Note that this solution will not work if your URL contains a hash (ex: comparer-acheter.fr/#hash). It will also not work if the name of your website changes. If you want to check if you are on the homepage, you can use this :

if(window.location.pathname == '/') {
    // you are on the homepage
}

You will have more informations on how locations work on this post : javascript window location href without hash?

edited May 18 '18 at 12:22

answered May 18 '18 at 10:06

Ebatsin

552
5
17

Thanks a lot! It's working perfectly. here the corrected code: if (window.location.href == "https://www.comparer-acheter.fr/") { document.getElementsByClassName("rh-flex-right-align") .[0].style.display = 'none'; – May 18 '18 at 10:18
@Flo Be aware that is will not work if you have a hash in the URL (ex: "comparer-acheter.fr/#myHash"). If you just want to check if you are on the homepage, you can also use `window.location.pathname == '/'`. I updated my answer to reflect this. – Ebatsin May 18 '18 at 12:18

Hide a CSS class only on homepage

1 Answers1