Cannot remove classList

Question

I'm trying to remove a class called active in my code. The class active appears when an element is clicked with the addEventListener but I would like to use a function onClick that searches for the class active and removes it. Still allowing the addEventListener to add active when another element is clicked. Here is an example of what I want to achieve, in mobile I want to do the multi-level where the div stacks on-top another div and can go back to the previous div https://codyhouse.co/demo/mega-dropdown/index.html#0

const dropDowns = document.querySelectorAll(".mobile-nav .dropdown");
for (var i = 0; i < dropDowns.length; i++) {
  dropDowns[i].addEventListener("click", function() {
    this.children[1].classList.add("active");
  });
}

function closeDropDown() {
  const temp = document.querySelectorAll(".mobile-nav .dropdown-content");
  temp.classList.remove("active");
}

<div class="dropdown">
  <button class="dropbtn">{{ link.title }}
            <i class="fa fa-caret-down"></i>
          </button>
  <div class="dropdown-content">
    <div class="mm-row">
      <div class="mm-column">
        <div class="mm-subcategory">
          <i class="fas fa-arrow-left" onclick="closeDropDown()"></i>
          <h3>{{ link.title | link_to: link.url }}</h3>
        </div>
        {% for child_link in linklists[child_list_handle].links %} {{ child_link.title | link_to: child_link.url }} {% endfor %}
      </div>
      <div class="dropdown-feature">
        {% assign collection= collections.winter-wear %}
        <img src="{{ collection.image | img_url: '908x330' }}">
      </div>
    </div>
  </div>
  <!-- /dropdown-content -->
</div>

`querySelectorAll` return an array-like [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) not an `Element`. Use `querySelector` instead to get only one element, or use `forEach` and the nodelist to loop over all the elements: `temp.forEach(e => e.classList.remove("active"));` — ibrahim mahrir, Oct 28 '20 at 19:34
This is not a duplicate of https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example, he is using `this.children[1]` not `this.children[i]`, no closures here whatsoever. — ibrahim mahrir, Oct 28 '20 at 19:38

Ali Torki · Answer 1 · 2020-10-29T08:57:00.327

2

The querySelectorAll function returns an array of nodes. Use the querySelector instead.

function closeDropDown() {
  const temp = document.querySelector(".mobile-nav .dropdown-content");
  temp.classList.remove("active");
}

function myFunction() {
  var element = document.querySelector("#myDIV");
  element.classList.remove("bgStyle");
}

.bgStyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}

<p>Click the "Try it" button to remove the "mystyle" class from the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="bgStyle">
This is a DIV element.
</div>

edited Oct 29 '20 at 08:57

answered Oct 28 '20 at 19:37

Ali Torki

1,929
16
26

I don't get the error anymore but the code does not show any results unfortunately. – artchurro Oct 28 '20 at 20:34
I've added a demo to ensure the code is working, if your code is not working, make sure you passed the right path to the querySelector function. Check it by Browser inspect element tab. – Ali Torki Oct 29 '20 at 08:58

Cannot remove classList

1 Answers1