javascript - 从上层元素中移除元素类

Question

我想在点击链接时删除上层元素的类:

var icon_burger = document.querySelector(".page-header__logo-link--burger");
var logo_link = document.querySelector(".page-header__logo-link");
var icon_cross = document.querySelector(".page-header__icon-closed");
var main_nav = document.querySelector(".main-nav");
var link_cross = document.querySelector(".page-header__logo-link--closed");

icon_burger.addEventListener("click", function (event) {
  event.preventDefault();
  main_nav.classList.remove(".hidden-devices");
  link_cross.remove(".hidden-devices");
});

.hidden-devices {
  display: none;
}

<header class="page-header">
  <div class="wrapper-flex">
    <nav class="main-nav main-nav--nojs hidden-devices">
      <button class="main-nav__toggle">
      </button>
      <ul class="main-nav__list site-list">
        <li class="main-nav__items"><a>Главная</a></li>
        <li class="main-nav__items"><a href="#">Фотографии</a></li>
        <li class="main-nav__items"><a href="#">Конкурс</a></li>
        <li class="main-nav__items"><a href="#">Lolkekcheburek</a></li>
      </ul>
      <a href="#" class="main-nav__toggle main-nav__toggle--close"></a>
    </nav>
  </div>
  <div class="page-header__nav-wrap">
    <a href="/" class="page-header__logo-link">
     </a>
    <a class="page-header__logo-link page-header__logo-link--burger">
      <svg class="page-header__icon-burger">
        <use xlink:href="#img--svg--icon-menu-burger"></use>
      </svg>
    </a>
     <a class="page-header__logo-link page-header__logo-link--closed hidden-devices" href="#">
      <svg class="page-header__icon-closed">
        <use xlink:href="#img--svg--icon-menu-cross"></use>
      </svg>
    </a>
    </div>
    </header>

现在不行了。我认为这是因为 main-nav 在结构上比 .page-header__logo-link--burger 更高。但我不确定我的猜想是否正确。如何删除 .hidden-devices 类？

Answer 1

classList.remove 调用中的类名有问题。试试这个:

icon_burger.addEventListener("click", function (event) {
  event.preventDefault()
  main_nav.classList.remove("hidden-devices")
  link_cross.remove("hidden-devices")
})

你不应该有 '.'在这种情况下在类名中。只有在编写选择器时才这样做。 classList.remove 需要一个字符串，它是类名，而不是选择器。