CODEWITHSUNDEEP
javascript
artchurro
artchurro

Reputation: 79

Cannot remove classList

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>

Upvotes: 3

Views: 676

Answers (1)

Ali Torki
Ali Torki

Reputation: 2028

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>

Upvotes: 2

Related Questions