Как удалить все классы, начинающиеся с определённой подстроки?

Question

[Za Za]

Нужно удалять класс modal--mod1 или modal--mod2 или modal--mod3.

Писать в коде

.classList.remove('modal--mod1')
.classList.remove('modal--mod2')
.classList.remove('modal--mod3')

вроде лишнее же.

Answer 1

[0xD34F]

Кого надо удалить: const classPrefix = 'modal--';

Удаляем:

Array.from(el.classList).forEach(n => el.classList.toggle(n, !!n.indexOf(classPrefix)));

или

el.classList.remove(...[...el.classList].filter(n => n.startsWith(classPrefix)));

или

for (let i = el.classList.length; i--;) {
  if (el.classList[i].search(classPrefix) === 0) {
    el.classList.remove(el.classList[i]);
  }
}

или

el.classList.value = el.classList.value
  .split(' ')
  .filter(RegExp.prototype.test.bind(RegExp(`^(?!${classPrefix})`)))
  .join(' ');

или

el.className = el.className.replace(RegExp(`(^| )${classPrefix}\\S*`, 'g'), '').trim();

Comments

[Za Za]

а как данное вставить в

document.querySelector('.modal').classList.remove('modal--')

повертел, знаний не хватает
думал мож проще есть, аля выражением .classList.remove('modal--__$__')

[0xD34F]

Za Za, вот как? А денег хватает?

Иметь за плечами 3+ лет опыта и такое спрашивать... Наглость, лень и некомпетентность просто фантастические.

[Za Za]

Иметь за плечами 3+???
у меня нет такого опыта в js (верней что такое это понимаю и даже маломальски могу обьяснить или понять что вижу, но думаю вы тоже можете понять что перед вами француз, а не житель Испании легко. И для этого вам не нужно изучать или знать их язык. Хотя у вас тоже думаю есть не мало лет опыта в этих языках - фильмы же смотрите и путешествуете.

[0xD34F]

Za Za, история ваших вопросов свидетельствует об обратном: 59 имеют тэг "js", первый из них был задан летом 2019 года.

[Za Za]

все рано ни черта не понял как это вставить

el.classList.remove(...[...el.classList].filter(n => n.startsWith('modal--')));

в это

document.querySelector('.modal').classList.remove('modal--modal1', 'modal--modal2');

ща код так работает, но вижу что он плохой и требует доработки(но моих трех лет опыта пока хватило только на это)))

const close = document.querySelectorAll('.close')
for (let closes of close) {
    closes.onclick = function() { 
        document.querySelector('.modal').classList.remove('modal--modal1', 'modal--modal2');
    };
}

[Za Za]

0xD34F, это лишь означает, что по прежнему не перегорел и стараюсь в свободное время познать что то. Но точно это не означает, что я 3х летний опытный прогер в этом языке.
Хотя знаю уйму обратных примеров - знаний у людей меньше, но считают себя гуру

[0xD34F]

это лишь означает, что...

Za Za, нет, это означает совсем другое - что вы обнаглевший лентяй. На протяжении нескольких лет регулярно сталкиваетесь с языком, но вместо того, чтобы составить себе труд получить хотя бы минимальный опыт работы с оным, предпочитаете приходить сюда с вопросами уровня "2 x 2 = ?".

опыта пока хватило только на это)))

Позорище конечно, просто невероятное.

Сохранить ссылку на элемент в голову не пришло, да?

document.querySelectorAll('.close').forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const el = document.querySelector('.modal');
  el.classList.remove(...[...el.classList].filter(n => n.startsWith('modal--')));
}

[Za Za]

0xD34F, 59 вопроса за 24000 часа это регулярно сталкиваюсь?
нужно еще тут вопросы посмотреть по css/py/html/php/видеоредактированию/фотошопу/векторной графике... и это только тостер (не берем сюда кулинарные паблики/путешествия и тд и тп - там я тоже походу лентяй, а не любитель

хотя не понимаю почему не работает

document.querySelector('.modal').classList.remove(...[...close.classList].filter(closes => closes.startsWith('modal--')));

а это работает

const el = document.querySelector('.modal');
  el.classList.remove(...[...el.classList].filter(n => n.startsWith('modal--')));

[assetkad]

0xD34F, тут с вами не поспоришь.

Answer 2

[Сергей Соколов]

Получить массив с именами классов,
отфильтровать начинающиеся на искомую подстроку,
удалить только их:
через 3 секунды удалятся классы, начинающиеся на "habr--"