Блог

Главная - Вопросы по программированию - если класс содержит класс ___, то удалите текст между

если класс содержит класс ___, то удалите текст между

#javascript

#javascript

Вопрос:

Я хочу удалить текст между, <a href="#" class="main_navigation-mobile-logo">text</a> когда в <ul class="main_navigation-menu js-main_navigation-menu"> будет переключен class .main_navigation-menu-open, поэтому, когда он будет выглядеть так там: <ul class="main_navigation-menu js-main_navigation-menu main_navigation-menu--open"> я хочу удалить этот текст между a (он отображается только в максимальной ширине 991px)

JS:

 const menuMobile = document.querySelector(".js-main_navigation-menu");

function myFunction(x, y) {
    if (x.matches amp;amp; y.matches) {
        $('.main_navigation-mobile-logo').html('');
    }
}

var x = window.matchMedia("(max-width: 991px)");
var y = menuMobile.classList.contains("main_navigation-menu--open");

myFunction(x, y);
x.addEventListener(myFunction);
y.addEventListener(myFunction);

HTML:

 <ul class="main_navigation-menu js-main_navigation-menu">
                <li>...</li>
               <button>...</button>
            </ul>
            <a href="#" class="main_navigation-mobile-logo">text</a>

Что не так с кодом? Это не работает.

Комментарии:

1. Я пишу другой ответ с помощью CSS, который удаляет текст при открытии меню

2. Используйте element.classList.contains(class); then element.innerText = ''; (чистый JS, без jQuery).

Ответ №1:

CSS:

 @media (max-width: 991px) {
    .main_navigation-menu--open   a { //select the adjacent sibling
      font-size: 0; 
    }
}

Поэтому, когда он открыт, текст исчезает

Ответ №2:

 // when screen is max-width 991px
if ($(window).width() <= 991) {

  $('#toggle').on('click', function () {
      $('.main_navigation-menu').toggleClass('main_navigation-menu--open');
      $('.main_navigation-mobile-logo').toggle();
  });

}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">click me for toggle</button>
<ul class="main_navigation-menu js-main_navigation-menu">
    <li>...</li>
    <button>...</button>
</ul>
<a href="#" class="main_navigation-mobile-logo">text</a>

Ответ №3:

Существуют различные способы манипулирования текстом

 function myFunction(x, y) {
if (x.matches amp;amp; y.matches) {
    $('.main_navigation-mobile-logo').innerHTML = '';
}