Así que tengo esta estructura básica:
<div class="parentA"> <div class="my special classes"> <!-- stuff --> </div> </div> <div class="parentB"> <div class="my special classes"> <!-- stuff --> </div> </div> ¿Cómo puedo eliminar las "mis clases especiales" del div parentB solamente?
Fondo. He agregado clases adicionales al núcleo/bloques en WordPress. También tengo bloques personalizados (por ejemplo, pestañas/acordeón) que permiten InnerBlocks. Si agrego núcleo/bloques a estos, necesito eliminar estas clases adicionales.
¿Desea eliminar el estilo de la clase o eliminar el selector de clase del HTML?
Si desea eliminar el estilo, dependiendo de la complejidad del interior del segundo bloque, puede intentar
.parentB > .my_special_class1 { background-color: inherit; }Si desea eliminar los selectores reales, la forma más sencilla probablemente sería eliminarlos/cambiarlos manualmente (suponiendo que no se genere un código). También puedes usar Javascript, como
/* Not tested */ function myFunction() { var element = document.getElementById("parentB").forEach( e => e.classList.remove("my_special_class1")); }jQuery también tiene un método removeClass que es útil si está utilizando jQuery.
let specialClasses = ["1", "2", "3"] let elements = document.querySelectorAll('.parentB .' + specialClasses.join("")) // get them all elements.forEach(el => { el.classList.remove(...specialClasses) })Puede seleccionar todos esos elementos con .parentA .my.special.classes, .parentB .my.special.classes y luego eliminar esas clases para esos elementos:
document.querySelectorAll('.parentA .my.special.classes, .parentB .my.special.classes').forEach((el) => { el.classList.remove('my', 'special', 'classes') })