移除具有特定父类的元素的CSS类

Question

我有了这个基本结构:

<div class="parentA">
<div class="my special classes">
<!-- stuff -->
</div>
</div>
<div class="parentB">
<div class="my special classes">
<!-- stuff -->
</div>
</div>

如何去掉"我的特殊类"?仅仅是parentBdiv ?

的背景。我在WordPress的核心/块中添加了额外的类。我也有自定义块(如标签/手风琴)，允许InnerBlocks。如果我添加核心/块到这些，我需要剥离这些额外的类。

Answer 1

您可以使用.parentA .my.special.classes, .parentB .my.special.classes选择所有这些元素，然后为这些元素删除这些类:

document.querySelectorAll('.parentA .my.special.classes, .parentB .my.special.classes').forEach((el) => {
el.classList.remove('my', 'special', 'classes')
})

Answer 2

您想要从HTML中移除类的样式，还是移除类选择器?

如果你想删除样式，根据第二个块内部内容的复杂程度，你可以尝试

.parentB > .my_special_class1 {
background-color: inherit;
}

如果您想要删除实际的选择器，最简单的方法可能是手动删除/更改它们(假设它不是生成的代码)。你也可以使用Javascript，比如

/* Not tested */
function myFunction() {
var element = document.getElementById("parentB").forEach( e => e.classList.remove("my_special_class1"));
} 

jQuery还有一个removeClass方法，如果你正在使用jQuery，这是很方便的。

https://www.w3schools.com/howto/howto_js_remove_class.asp

Answer 3

let specialClasses = ["1", "2", "3"]
let elements = document.querySelectorAll('.parentB .' + specialClasses.join("")) // get them all 
elements.forEach(el => {

el.classList.remove(...specialClasses)
})