How to get all classes from an element?

Question

I'm trying to remove the class "is-active" and "is-visbile" that's in the picture. But I don't know what I'm doing wrong, I know the element has the class but when I try to remove it or even check if it has the class using contains, it doesn't work.

 const splideList1 = document.querySelectorAll(".splide-one li")
 splideList1[0].classList.remove('is-active')
 splideList1[0].classList.remove('is-visible')

console.log(splideList1[0].classList)

The image is the result of the console.log

HTML

  <ul class="splide__list second-slider">
   <li class="splide__slide">
      <img class="active-img" src="<?php the_field('imagem_1') ?>" />
   </li>
   <li class="splide__slide">
      <img class="active-img" src="<?php the_field('imagem_2') ?>" />
   </li>
   <li class="splide__slide">
      <img class="active-img" src="<?php the_field('imagem_3') ?>" />
   </li>
   <li class="splide__slide">
      <img class="active-img" src="<?php the_field('imagem_4') ?>" />
   </li>
   <li class="splide__slide">
      <img class="active-img" src="<?php the_field('imagem_5') ?>" />
   </li>
   <li class="splide__slide">
      <img class="active-img" src="<?php the_field('imagem_6') ?>" />
   </li>
   <li class="splide__slide">
      <img class="active-img" src="<?php the_field('imagem_7') ?>" />
   </li>
   <li class="splide__slide">
      <img class="active-img" src="<?php the_field('imagem_8') ?>" />
   </li>
</ul>

Given the mismatch between the collapsed value ("splide__slide") and the value in the expanded view (splide__slide is-active is-visible) I would hazard a guess that you're not using dev tools correctly. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jul 15, 2021 at 22:41

gunwin · Accepted Answer · 2021-07-15 22:42:53Z

2

Your code appears to be correct:

const splideList1 = document.querySelectorAll(".splide-one li")

console.log("before", splideList1[0].classList.toString())

splideList1[0].classList.remove('is-active')
splideList1[0].classList.remove('is-visible')

console.log("after", splideList1[0].classList.toString())

<ul class="splide-one">
  <li class="is-active is-visible">Item</li>
</ul>

answered Jul 15, 2021 at 22:42

gunwin

4,8525 gold badges39 silver badges59 bronze badges

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

Comments

Kinglish · Accepted Answer · 2021-07-15 22:42:25Z

1

If you actually just need the first matching element, you can use querySelector

document.querySelector(".splide-one li").classList.remove('is-active', 'is-visible')

if you want to target the first matching item that has those classes, you could use

document.querySelector(".splide-one li.is-active.is-visible").classList.remove('is-active', 'is-visible')

answered Jul 15, 2021 at 22:42

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

Comments

AM Douglas · Accepted Answer · 2021-07-15 22:57:14Z

Just tried your code on the Splider website's demos from the browser console (I've never worked with it before, just googled "splider" because I figured from the naming convention that it was a plugin).

It works provided that the selector fed into querySelectorAll is ".splide__list li" to match the demos.

Which makes me think that your selector string isn't right.

Is .splide-one actually the class on the element containing the slides or should it be an ID? #splide-one li?

For diagnostic purposes try document.querySelectorAll('.is-active.is-visible') instead -- this will pick up only the active/visible slide. If that works then .splide-one is the problem, maybe it's the element's ID you've got there, or maybe its class is splide__one or something?

Collectives™ on Stack Overflow

How to get all classes from an element?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related