What's the difference between 2 class lists


#1

What does each one say to do?

classList.remove("hide");

classList.add("hide");

#2

If you haven't visited the MDN site yet, you should check it out. It can not only answer basic questions, but often there is example code and browser support information.


#3

add hide
remove hide

what's the difference?


#4

Would I be removing hide here, or adding?

     playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("inline-block");

#5

Sorry, but are you saying you honestly don't know the difference between add and remove?


#6

the hide portion of it.


#7

What do you think 'hide' is? What kind of attribute?


#8

I was told to

Replace:
.style.display

With:
.classList.add/remove.

Before it looked like this:

        document.querySelector(".play1").style.display = "none";
        document.querySelector(".pause1").style.display = "inline-block";

#9

Should I have put none there instead?


#10

You were asking about these two lines; I'm not at all sure why you've gone back to a different piece of code and started asking about "none".

If you had the following HTML

<div class="hide">...</div>

and applied classList.remove("hide"); to it, what do you think might happen?

If you had the following HTML

<div class="other">...</div>

and applied classList.add("hide"); to it, again, what do you think might happen?


#11

Like this I think.

        playButton.querySelector(".play").classList.add("hide");
        playButton.querySelector(".pause").classList.remove("hide");
        player.play();
      } else {
        playButton.querySelector(".play").classList.remove("hide");
        playButton.querySelector(".pause").classList.add("hide");
        player.pause();

#12

When you set the display to none, you are intending to hide the element. Therefore, you want to instead add the hide class to that element.

When setting the display to inline-block, you are wanTing to show the element, which is achieved by removing that hide class from the element.


#13

No, don't post code, especially not JavaScript code.

I'm asking you to describe in plain English, what you think will happen to the HTML I've given you, when those particular JavaScript statement are applied to them.


#14

Shows
.classList.remove("hide");

Hides
.classList.add("hide");


#15

Not exactly the explanation I was hoping for, as again you've posted the JavaScript code, and have not described its effect on the HTML.

In short then, .remove("hide") will look at the element it has been targeted at, and if it finds the class hide, it will remove it from the classlist, so this

<div class="hide">...</div>

becomes this

<div class="">...</div>

In the case of .add("hide"), this

<div class="other">...</div>

becomes this

<div class="other hide">...</div>

Can you see what's happening there?


#17

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