If body contains at least one class from this list of classes than do stuff

I wish to do this operation:
If body contains at least one class from this list of classes than do stuff.

Pseudocode

const classObject = {
    "page-1" ||
    "page-2" ||
    "page-3" ||
}

if (body.classList.contains(classObject)) {
    document.querySelector("#x").remove();
}

Is there any similar way to go in JavaScript?

contains cannot work against an object - just a string. But it should be pretty easy to extrapolate how to leverage the object array contents to work against the contains method.

Give it a shot and come back with what you’ve tried if you can’t work it out…

Hello Dave,

Most nicely, I don’t share the notion that it should be easy :slight_smile:

For example,

Failed patterns

1)

const classNames = [
    "c1",
    "c2",
    "c3"
];

if (document.body.classList.contains(classNames.some())) {
    document.querySelector("#catlinks-sidebar").remove();
}

2)

const classNames = [
    "c1",
    "c2",
    "c3"
];

if (classNames.some( (className)=>{documnet.body.classList.contains(className)} )) {
    document.querySelector("#catlinks-sidebar").remove();
}

A working pattern

const classNames = document.querySelector("body").classList;
if (
    classNames.contains("c1") ||
    classNames.contains("c2") ||
    classNames.contains("c3")
) {
    document.querySelector("#catlinks-sidebar").remove();
}

The some was close, but you used the wrong method…

if (classNames.some((className) => document.getElementsByClassName(className).length > 0)) {
    document.querySelector("#catlinks-sidebar").remove();
}
1 Like

Or in CSS alone::slight_smile:

body:where(.c1, .c2, .c3) #catlinks-sidebar{display:none}

2 Likes

CSS feels like a game of Peep behind the Curtain to me.

Every time I look away for a bit and look back it’s changed :slightly_smiling_face:

I didn’t know the :where pseudo selector yet. Looks useful!

3 Likes

It’s short hand. He could have written it as (I think…that one is a little complex)

body.c1 #catlinks-sidebar, 
body.c2 #catlinks-sidebar,  
body.c3 #catlinks-sidebar { display:none }
1 Like

Yup. Already looked it up on MDN :slightly_smiling_face:

2 Likes

If you look at classList.add you can add multiple classes with a comma separated list

Kind of need something similar for classList.contains. I was thinking along the lines of

const containsSome = (elem, ...classNames) => 
    classNames.some((className) => elem.classList.contains(className))

So could be used like

html

<div id='div1' class='a b c2'></div>
<div id='div2' class='a b'></div>
<div id='div3' class='a c4'></div>
<div id='div4' class='a b c1 '></div>

javascript

const containsSome = (elem, ...classNames) => 
    classNames.some((className) => elem.classList.contains(className))

const divElements = document.querySelectorAll('div')

const matches = Array
  .from(divElements)
  .filter((elem) => containsSome(elem, 'c1', 'c2', 'c3'))
  .map((elem) => elem.id)

console.log(matches) // ['div1', 'div4']

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