使用JS从html元素中删除class

Question

I have been struggling for 2 days now with removing an added class from an Element. Checked all over the web, but can not find the answer to the problem.

I can add a class to the navigation and show the submenu that works fine.

Then I want to hide the menu again when a user clicks anywhere in the window, but as soon as I type the code to remove the class, it does not work at all. I am using only Vanilla JS without to look at jquery to master JS first.

Thank you so much in advance, couldn´t find any solution on the web!

https://jsfiddle.net/dx6ofnvs/4/

HTML

 <nav> 
  <div class="nav__navigation">
    <ul>
      
      <li id="services__btn"> <a href="#"> Leistungen</a></li>
        <div class="services__dropdown__container">
          <ul id="services__dropdown" class="dropdown">
              <li> <a href="#"> Link one</a></li>
              <li> <a href="#"> Link two</a></li>
              <li> <a href="#"> link three</a></li>
              <li> <a href="#"> link four</a></li>
           
          </ul> 
        </div>
      
   
    
    </ul>
  </div>
  
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>

</nav>

CSS

const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav__navigation");
const navLinks = document.querySelectorAll(".nav__navigation li");
const servicesBtn = document.querySelector("#services__btn");
const servicesDropdown = document.querySelector("#services__dropdown");
const servicesDropdownContainer = document.querySelector("#services__dropdown__container")
const html = document.querySelector("html")

///// Open Mobile Menu

burger.addEventListener("click", (navSlide));

function navSlide() {
    nav.classList.toggle("nav-active");
}



///// Open Dropdown Desktop Width
 servicesBtn.addEventListener("click", (e) => {
    servicesDropdown.classList.add("dropdown--active");    
}) 



window.addEventListener("click", (e) => {      
    if(e.target != servicesDropdown) {

/// I think this code ist the problem that it removes the class immedeatly after shown

        servicesDropdown.classList.remove("dropdown--active")
        console.log('clicked');        
    }    
})

Answer 1

The target element in the window function is not the button, is the link. You should check for it instead. I modified your fiddle so you can check it

    <li id="services__btn"> <a class="button" href="#"> Leistungen</a></li>

...

window.addEventListener("click", (e) => {
    let button = document.querySelector(".button");
        if(e.target !== button && servicesDropdown.classList.contains("dropdown--active")) {
            servicesDropdown.classList.remove("dropdown--active")
            console.log('clicked');        
        }
        console.log('e', e.target);
})

https://jsfiddle.net/ft2om9ak/1/

Answer 2

I have been struggling for 2 days now with removing an added class from an Element. Checked all over the web, but can not find the answer to the problem.

I can add a class to the navigation and show the submenu that works fine.

Then I want to hide the menu again when a user clicks anywhere in the window, but as soon as I type the code to remove the class, it does not work at all. I am using only Vanilla JS without to look at jquery to master JS first.

Thank you so much in advance, couldn´t find any solution on the web!

https://jsfiddle.net/dx6ofnvs/4/

HTML

 <nav> 
  <div class="nav__navigation">
    <ul>
      
      <li id="services__btn"> <a href="#"> Leistungen</a></li>
        <div class="services__dropdown__container">
          <ul id="services__dropdown" class="dropdown">
              <li> <a href="#"> Link one</a></li>
              <li> <a href="#"> Link two</a></li>
              <li> <a href="#"> link three</a></li>
              <li> <a href="#"> link four</a></li>
           
          </ul> 
        </div>
      
   
    
    </ul>
  </div>
  
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>

</nav>

CSS

const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav__navigation");
const navLinks = document.querySelectorAll(".nav__navigation li");
const servicesBtn = document.querySelector("#services__btn");
const servicesDropdown = document.querySelector("#services__dropdown");
const servicesDropdownContainer = document.querySelector("#services__dropdown__container")
const html = document.querySelector("html")

///// Open Mobile Menu

burger.addEventListener("click", (navSlide));

function navSlide() {
    nav.classList.toggle("nav-active");
}



///// Open Dropdown Desktop Width
 servicesBtn.addEventListener("click", (e) => {
    servicesDropdown.classList.add("dropdown--active");    
}) 



window.addEventListener("click", (e) => {      
    if(e.target != servicesDropdown) {

/// I think this code ist the problem that it removes the class immedeatly after shown

        servicesDropdown.classList.remove("dropdown--active")
        console.log('clicked');        
    }    
})

Answer 3

There exists a (DOM) contains function for cases like this. Which you can use like this:

const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav__navigation");
const navLinks = document.querySelectorAll(".nav__navigation li");
const servicesBtn = document.querySelector("#services__btn");
const servicesDropdown = document.querySelector("#services__dropdown");
const servicesDropdownContainer = document.querySelector(".services__dropdown__container")
const html = document.querySelector("html")

///// Open Mobile Menu

burger.addEventListener("click", (navSlide));

function navSlide() {
    nav.classList.toggle("nav-active");
}



///// Open Dropdown Desktop Width
 servicesBtn.addEventListener("click", (e) => {
    servicesDropdown.classList.toggle("dropdown--active");    
}) 



document.addEventListener("click", (e) => {
    if(!servicesDropdownContainer.parentNode.contains(e.target) && servicesDropdown.classList.contains("dropdown--active")) {
        servicesDropdown.classList.remove("dropdown--active")
        console.log('clicked');        
    }    
})

Also, services__dropdown__container is a class and not an id.