JavaScript element.classList.remove not working

Question

I am trying to remove a class from a certain element whenever the user clicks a button.

In the process I check whether the element has the class before removing it.

I am using a React component and I'm setting the class variable this.images in componentDidMount Also, the console.log in there confirms the array of images that i need.

    componentDidMount() {
        this.images = document.querySelectorAll(".project-image");
        console.log(this.images);
    }

    renderNextImage() {
        for (let i = 0, ilen = this.images.length; i < ilen; i++) {
            if (!this.images[i].classList.contains('d-none')) {
                this.images[i].classList.add('d-none');
                this.toggleNextImage(i);
            }
        }
    }
    toggleNextImage(count) {
        let max = this.images.length - 1;
        if (count < max) {
            count++;
            if (this.images[count].classList.contains('d-none')) {
                console.log("element contains class d-none");      // THIS WORKS
                this.images[count].classList.remove('d-none');
            }
        }
    }

The console log shows up in my console but the actual classList.remove part doesn't work.

What am I doing wrong?

Any help would be appreciated.

Can you post a minimal reproducible example, including the markup for the elements, how you are constructing the class and how you are calling the method? — Bergi
– Bergi, Commented Sep 27, 2018 at 21:43
I don't know if it helps but I just checked and the classList attribute have a toggle method — Wolgan Ens
– Wolgan Ens, Commented Sep 27, 2018 at 21:43
Btw, you don't need the if (….contains(…)) check, just call remove - it won't error when the class doesn't exist. — Bergi
– Bergi, Commented Sep 27, 2018 at 21:44
@WolganEns He's not actually toggling. One function always adds, the other one always removes. — Barmar
– Barmar, Commented Sep 27, 2018 at 21:48

Barmar · Accepted Answer · 2018-09-27 21:55:37Z

1

The problem is that you're doing this in a loop. In renderNextImage() you call toggleNextImage(), which removes the class from the next element in the list. Then the loop repeats with the next value of i, which adds the class back.

You need to break out of the loop when you find the image to toggle.

renderNextImage() {
    for (let i = 0, ilen = this.images.length; i < ilen; i++) {
        if (!this.images[i].classList.contains('d-none')) {
            this.images[i].classList.add('d-none');
            this.toggleNextImage(i);
            break;
        }
    }
}

answered Sep 27, 2018 at 21:55

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

2 Comments

Regentix Over a year ago

You're right, adding break; fixed it. Somebody in the comments said that this is not the best way of doing this. How would one do this more efficient?

Barmar Over a year ago

You can save the index of the current image in a global variable, and just increment it. Or you can use querySelector(".d-none") and get the index of that element in its parent element.

Leo Rossetti · Accepted Answer · 2018-09-28 00:26:08Z

0

This vanilla js remove works just if you apply it on the element, like in this example. You need to make sure if this code (this.images[count]) represents an element.

// JavaScript
var div = document.querySelector('div');
div.classList.remove('myClass');

edited Sep 28, 2018 at 0:26

user7159290

answered Sep 27, 2018 at 21:44

Leo Rossetti

1911 gold badge3 silver badges14 bronze badges

9 Comments

Barmar Over a year ago

This is really a comment, not an answer. With a bit more rep, you will be able to post comments. See why do I need 50 reputation to comment, what can I do instead for an explanation.

Guerric P Over a year ago

I agree with @Barmar don't ask a question in an answer

Barmar Over a year ago

If it didn't represent the element, how could the contains() test work?

Leo Rossetti Over a year ago

Yeah, I know man. But as you said. I can't create comments yet. So if I am trying to help with a comment I just post like I did.

Regentix Over a year ago

The reason why i've added the contains() part, is because i wanted to make sure it did actually represent an element.

|

Collectives™ on Stack Overflow

JavaScript element.classList.remove not working

2 Answers 2

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related