What's the difference between 2 class lists

JavaScript
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.

1 Like
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?

1 Like
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.

1 Like
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.

1 Like
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?

1 Like
17

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