リンクをクリックがhappenesたときに、私は上位要素のクラスを削除したい上位要素

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>

は、今では動作しません。メインナビは.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は、セレクタではなくクラス名である文字列を要求しています。