Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Can't remove class with Javascript

Can't remove class with Javascript

InMotion_Design
New Member
4 0 0

I'm trying to remove a class attribute from my code using Javascript but I get an error saying "TypeError: Cannot read property 'remove' of undefined"

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>

 

Reply 1 (1)

Jayvin
Shopify Partner
284 42 89

Hi,

You are getting this error because temp is not defined, '.mobile-nav .dropdown-content' html elements have not been found.

You need to check if this element exists before remove the class. An example is to do something like this in your code.

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