Как удалить классы у всех дочерних элементов?

Question

[Mesuti]

Привет!
Есть такая конструкция:

<div class="parent">
    <div class="child style"></div>
    <div class="child custom"></div>
    <div class="child"></div>
    <div class="child custom"></div>
    <div class="child style"></div>
</div>

Как может выглядеть код на JS для удаления классов custom у всех дочерних элементов?

Answer 1

[0xD34F]

Где элементы находятся и какой класс надо удалить:

const parentSelector = '.parent';
const className = 'custom';

Удаляем:

document.querySelectorAll(`${parentSelector} > .${className}`).forEach(n => {
  n.classList.remove(className);
});

// или

for (const n of document.querySelector(parentSelector).children) {
  n.className = n.className.replace(RegExp(`(^| )${className}(?= |$)`), '').trim();
}

Comments

[Mesuti]

Спасибо!
Гениальный человек!

[Mesuti]

Развивая тему, подскажите, пожалуйста.
1) Как может выглядеть удаление нескольких классов?
p.s.

document.querySelectorAll('.colors').forEach(n => n.classList.remove());

2) И как удаление всех классов кроме одного?

[0xD34F]

Александр Сорокин,

Как может выглядеть удаление нескольких классов?

element.classList.remove('class-1', 'class-2', 'class-3');

И как удаление всех классов кроме одного?

element.className = 'класс, который удалять не надо';

[Mesuti]

спасибо!!!

Еще вариант удаления и добавления нашел.
Красивый краткий на jquery

$('.parent').removeClass('class1 class2 class3').addClass('class4');