Necesito eliminar todos los tramos vacíos de uno de div. El problema es que, una vez que se realiza el ciclo forEach, anteriormente los intervalos vacíos no están vacíos ahora, así que pensé que podría usar el ciclo while pero parece que se repite solo. ¿Qué hice mal?
function removeEmptySpans() { const tree = document.getElementById('tree') const spans = Array.from(tree.querySelectorAll("span")) let emptySpansExist = true while (emptySpansExist) { emptySpansExist = false spans.forEach(span => { if (span.innerHTML === "") { span.remove() console.log("empty span") emptySpansExist = true } else { console.log("not empty span") } }) } } <div id="tree" onClick={removeEmptySpans}> <span> <span> <span></span> </span> <span> <span></span> <span><span></span><span></span></span> <span><span></span>content</span> </span> </span> <span></span> </div> function removeEmptySpans() { const tree = document.getElementById('tree'); const spans = Array.from(tree.querySelectorAll("span")).reverse(); for(let i=0; i<spans.length; i++) { if (spans[i].innerHTML.trim() === "") { // console.log(i, spans[i], spans[i].innerHTML, "---"); spans[i].remove(); } } } removeEmptySpans(); console.log('Remaining spans:', tree.querySelectorAll("span").length); <div id="tree" onClick="removeEmptySpans()"> <span> <span> <span></span> </span> <span> <span></span> <span><span></span><span></span></span> <span><span></span>content</span> </span> </span> <span> </span> </div>El código crea una lista de todos los tramos posibles dentro del elemento del árbol.
El selector de consultas creará una lista de reenvío, pero para evitar conflictos, solo necesita invertir la lista para que pueda eliminar primero los elementos secundarios vacíos y evitar eliminar un elemento principal que tenga diferentes intervalos, algunos de los cuales están llenos de contenido.
El método de recorte en la declaración condicional le permite eliminar todos los espacios vacíos en el prefijo y el sufijo de su HTML interno para evitar confundir las funciones solo con espacios.