Question

是否有一种简单的方法可以使用JavaScript删除特定HTML元素的子元素的所有CSS类？我只知道如何分别删除每个。

谢谢。

Answer 1

您可以使用forEach和removeAttribute从子元素中删除class属性：

document.querySelectorAll('#example *').forEach(element => {
  element.removeAttribute('class');
});

Answer 2

要从元素中删除所有类，请将其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>

如何删除HTML元素的所有CSS类？

2 个答案: