Как удалить класс на мобильных устройствах в JS или jQuery?

Question

[Andress84]

Подскажите, пожалуйста, как удалить класс на мобильных экранах с помощью JS?? Через медиа css display:none не подходит. Необходимо именно удалить класс через js/jQuery

Comments

[v3shin]

Две подзадачи:
1. Определить, что экран мобильного.
2. Удалить элементы с определенным классом.
С чем затык?

[Andress84]

v3shin, я просто не знаю какой должен быть скрипт

[v3shin]

Andress84, тогда вам на фриланс.

Answer 1

[archelon]

document.addEventListener('DOMContentLoaded', function () {
    if (window.innerWidth < 640) {
        document.querySelector('.my-element').classList.remove('class-name');
    } else {
        document.querySelector('.my-element').classList.add('class-name');
    }
});

Comments

[Andress84]

Добрый день. Подскажите, пожалуйста, что необходимо добавлять document.querySelector ??

Вот разметка, где необходимо удалить класс .gsap-reveal-hero на мобильных экранах

<h1 class="heading gsap-reveal-hero">Заголовок </h1>

[Andress84]

Всё, разобрался! Спасибо большое за решение. Работает!

[Andress84]

Подскажите, как доработать, чтобы было множественное удаление класса на всех элементах, где есть класс gsap-reveal-hero ??

[archelon]

Если jquery у вас подключен, будет немного лаконичнее:

$(document).ready(function() {
    if (window.innerWidth < 640) {
        $('.gsap-reveal-hero').removeClass('class-name')
    } else {
        $('.gsap-reveal-hero').addClass('class-name')
    }
});

Answer 2

[Noder SS]

Удалить класс? $(selector).removeClass(className);