删除具有特定父类的元素的 css 类答案

【问题标题】：remove css class for elements with specific parent class删除具有特定父类的元素的 css 类
【发布时间】：2021-12-03 15:24:22
【问题描述】：

所以我有这个基本结构：

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

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

我怎样才能只去掉parentB div 的“我的特殊类”？

背景。我在 WordPress 的核心/块中添加了额外的类。我也有允许 InnerBlocks 的自定义块（例如选项卡/手风琴）。如果我向这些添加核心/块，我需要去掉这些额外的类。

【问题讨论】：

到目前为止你尝试过什么来删除这些类？
我可以删除/替换这些类的所有实例，但不确定如何仅针对具有特定父级的那些实例。

标签： javascript css wordpress

【解决方案1】：

您要删除类的样式，还是从 HTML 中删除类选择器？

如果要去掉样式，根据第二个block里面东西的复杂程度，可以试试

.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

【讨论】：

【解决方案2】：

let specialClasses = ["1", "2", "3"]

let elements = document.querySelectorAll('.parentB .' + specialClasses.join("")) // get them all 

elements.forEach(el => {
    
    el.classList.remove(...specialClasses)
})

【讨论】：

【解决方案3】：

您可以使用.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')
})

【讨论】：

谢谢，成功了：document.querySelectorAll('.tabs-panel .cell').forEach((el) => { el.classList.remove('cell', 'small-offset-1', 'small-22', 'large-offset-5', 'large-14', 'center-align', 'large-offset-7', 'large-10') })