Simple Javascript removing class

Question

I am trying to remove a class on mouseenter with Javascript. Can people explain whats causing it not to work? I am new to JS. The function works with an Alert so i know the function is working so it must be the remove class line thats causing the problem.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
 </head>
 <body>
    <div class="container">
       <div class="left-filter">
         <div class="left">
           <h1 class="heading1">hi</h1>
           <a href="" class="landing-btn">Shop</a>
         </div>
       </div>
    </div>

    <script>
    var left = document.querySelector('.left');
    var container = document.querySelector('container');
    left.addEventListener('mouseenter', function(){
    container.classList.remove('.left-filter');
    })
    </script>
    </body>
    </html>

container.classList.remove('left-filter');

Ele
– Ele

2018-05-15 19:20:22 +00:00
Commented May 15, 2018 at 19:20 — Ele
– Ele, Commented May 15, 2018 at 19:20
Still is not removing!

Blue
– Blue

2018-05-15 19:21:46 +00:00
Commented May 15, 2018 at 19:21 — Blue
– Blue, Commented May 15, 2018 at 19:21
Sorry my mistake it is It is!

Blue
– Blue

2018-05-15 19:23:42 +00:00
Commented May 15, 2018 at 19:23 — Blue
– Blue, Commented May 15, 2018 at 19:23

Muhammad Usman · Accepted Answer · 2018-05-15 19:28:13Z

2

container.classList.remove('.left-filter'); should be container.classList.remove('left-filter');

you only mention the name of the class in remove to remove the class. Not with .

Moreover document.querySelector('container'); should be document.querySelector('.container');

On a side note. If there are more than one elements with class .container, document.querySelector('.container') will only select the first one.

If you want to attach events to all of those elements, you'll have to use document.querySelectorAll('.container') , this will give you the node list and you'll have to loop through this list to attach events to all of the nodes

edited May 15, 2018 at 19:28

answered May 15, 2018 at 19:21

Muhammad Usman

10.1k26 silver badges41 bronze badges

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

4 Comments

Blue Over a year ago

Thank you for explanation, but this is still not working.

Blue Over a year ago

Apologies, it is!

Muhammad Usman Over a year ago

@Blue Glad to know that :) . Consider accepting the answer if it resolved your issue

Blue Over a year ago

Did it there! Thanks again

Elias Soares · Accepted Answer · 2018-05-15 19:21:53Z

2

Your selector for container is wrong. You are missing a . before the selector:

var container = document.querySelector('.container');
                                        ^
                                        |
                                        ---- This dot was missing

The dot indicates that you are selecting a element by the class. Without it, javascript was searching for a element named container.

Also the line that removes the class is wrong, the . is not needed here:

container.classList.remove('left-filter');

answered May 15, 2018 at 19:21

Elias Soares

10.3k4 gold badges36 silver badges62 bronze badges

Collectives™ on Stack Overflow

Simple Javascript removing class

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related