CODEWITHSUNDEEP
javascript
Kali
Kali

Reputation: 613

How to get all classes from an element?

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

enter image description here

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>

Upvotes: 0

Views: 65

Answers (3)

AM Douglas
AM Douglas

Reputation: 1903

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?

Upvotes: 1

gunwin
gunwin

Reputation: 4832

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>

Upvotes: 2

Kinglish
Kinglish

Reputation: 23654

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')

Upvotes: 1

Related Questions