Как я могу удалить все классы CSS элемента HTML?

1

Есть ли простой способ удалить все классы CSS дочерних элементов определенного элемента HTML с помощью JavaScript? Я знаю только, как удалить каждый из них по отдельности.

Заранее спасибо.

  • 0
    Что вы имеете в виду под «удалить все классы дочерних элементов»? Можете ли вы предложить пример входных и выходных данных?
  • 0
    Прочитайте этот минимальный воспроизводимый пример
Показать ещё 1 комментарий
Теги:

2 ответа

1
Лучший ответ

Вы можете использовать forEach и removeAttribute для удаления атрибута class из дочерних элементов:

document.querySelectorAll( '#example *' ).forEach( element =>
{
    element.removeAttribute( 'class' );
});
Поделиться
0

Чтобы удалить все классы из элемента, установите его имя className в пустую строку.

function removeAllClasses(elem){
 elem.className = "";
}

Чтобы получить все дочерние элементы элемента, вы можете использовать селектор запросов:

function getAllChildren(id){
 return document.querySelectorAll('#${id} *');//or document.querySelectorAll("#"+id+" *")
}

Вы можете использовать цикл for или forEach для удаления классов из всех дочерних элементов элемента.

var children = document.querySelectorAll("#id *");
for(let i = 0; i < children.length; i++){
 children[i].className = "";
}
//or
children.forEach(function(i){
 i.className = "";
});

Демо-версия:

.red{
  color: red;
}
.large{
  font-size: 5em;
 }
<div id="test">
<div class="red large">text</div>
<span class="red large">text</span>
<select class="red large">text</select>
<div class="red large">First layer
<div class="red large">second layer
<span class="red large">Nested third layer</span>
</div>
</div>
</div>
<script>
function removeAllClasses(elem){
   elem.className = "";
}
function getAllChildren(id){
     return document.querySelectorAll('#${id} *');
}
var children = getAllChildren('test');
for(let i = 0; i < children.length; i++){
  removeAllClasses(children[i]);
}
</script>
Поделиться
  • 0
    Я полагаю, что операция хочет, как elements.forEach(removeAllClasses); или что-то типа того
  • 0
    Да, это устанавливает имя класса только для элемента, а не его дочерних элементов
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню