así que estoy tratando de establecer una clase en un elemento principal (sección), cuando el segundo HTML interno de Child Div está vacío.
Entonces, por ejemplo: (Esta sección debe obtener una clase de "sección oculta" para ocultarla)
<section class="ef-area"> <div class="child-1"> <div class="child-2"> </div> </div> </section>Este no debe estar oculto porque "child-2" no está vacío
<section class="ef-area"> <div class="child-1"> <div class="child-2"> <div class="child-3"> ...//What Ever </div> </div> </div> </section>Recorrí todas las secciones de "área ef", pero ¿cómo puedo configurar solo esas secciones para mostrar = ninguna cuando el segundo hijo (hijo-2) está vacío?
Lo que hice es:
let efAreaDivs = document.querySelectorAll(".ef-area > div > div"); for (singleDiv of efAreaDivs) { if (singleDiv.innerHTML == "") { singleDiv.closest("section").classList.add("hide-section"); }La clase "sección oculta" nunca se establece.
Creo que js siempre lo ignora, porque hay singleDiv´s que no están vacíos o me equivoco?
El contenido de <div class="child-2"> continuación
<section class="ef-area"> <div class="child-1"> <div class="child-2"> </div> </div> </section> NO es una cadena vacía... es "\n "
Debe recortar el HTML interno (que elimina el espacio en blanco al principio y al final de la cadena, en este caso todo)
if (singleDiv.innerHTML.trim() == "") { singleDiv.closest("section").classList.add("hide-section"); }