Using JavaScript to delete a class from an HTML element

Question

Using JavaScript to delete a class from an HTML element

For the past 48 hours, I've been grappling with the challenge of removing an added class from an Element. Despite scouring the internet for a solution, I haven't been able to find one.

I have successfully added a class to the navigation to display the submenu, which works perfectly fine.

However, when attempting to hide the menu upon a user click anywhere on the window, the code to remove the class fails to work. I am solely using Vanilla JS without relying on jquery as I aim to master JS independently first.

Your assistance would be greatly appreciated as I have been unable to find a resolution online!

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

HTML

 <nav> 
  <div class="nav__navigation">
    <ul>
      
      <li id="services__btn"> <a href="#"> Services</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");
}



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



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

/// The issue appears to lie within this particular code snippet where it removes the class immediately after being displayed.

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

javascript dom-events

Answer 1

Answer №1

Instead of targeting the button in the window function, you should be targeting the link. Make sure to check for the link instead. I have updated your fiddle with this modification for reference.

    <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);
})

Updated Fiddle Link

Answer 2

Instead of targeting the button in the window function, you should be targeting the link. Make sure to check for the link instead. I have updated your fiddle with this modification for reference.

    <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);
})

Updated Fiddle Link

Answer 3

Answer №2

If you're dealing with a situation like this, there's a handy (DOM) function called contains that can come to the rescue. Here's how you can put it into action:

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, keep in mind that services__dropdown__container is a class and not an id.

Answer 4

If you're dealing with a situation like this, there's a handy (DOM) function called contains that can come to the rescue. Here's how you can put it into action:

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, keep in mind that services__dropdown__container is a class and not an id.

Using JavaScript to delete a class from an HTML element

Answer №1

Answer №2

Similar questions

Store JWT as a cookie in Vue JavaScript and ensure it is successfully saved before proceeding

Send a file from a form using Gatsby to getform.io using the axios library

Include the providers after declaring the AppModule

Vue automatically populates an empty array with an Observer object

Why is it that the .forEach() function has the ability to alter the Vuex state?

The use of ExpressJs res.sendFile is not effective following the implementation of middleware

Why are the links in the navgoco slide menu failing to function properly?

The text becomes distorted and unreadable after the function is applied. It is impossible to decipher the message

Utilizing asynchronous methods within setup() in @vue-composition

What is the best way to conceal a callback form once it has been successfully submitted?

Invalid function call detected, transitioning from Reactjs to Nextjs

Show an HTML image encoded in base64 from its origin

Changing the URL parameters to accommodate a specific query

How can I quickly send a flash logout notification through Express or verify if a redirection has occurred

Tips for successfully implementing Typeahead with Bloodhound and a JSON response

Using AngularJS to show/hide elements within a colgroup tag

Store the response token from a Request.post in a variable

The icon is not being displayed when the onHover event on the Material UI component is triggered

Attempting to retrieve an object's attribute

Create a personalized Command Line Interface for the installation of npm dependencies