如何刪除所有空跨度<div> ?

Question

我需要從 div 之一中刪除所有空跨度。 問題是，一旦 forEach 循環完成，以前不是空的跨度現在是空的，所以我想我可以使用 while 循環，但它似乎是循環自身。 我做錯了什么？

 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>

Answer 1

 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>

該代碼列出了樹元素內所有可能的跨度。

查詢選擇器將構建一個前向列表，但為避免發生沖突，您只需反轉列表，這樣您就可以首先刪除空的子節點，並避免刪除具有不同跨度的父節點，其中一些填充了內容。

條件語句中的trim方法允許您刪除 innerHTML 前綴和后綴處的所有空格，以避免將函數與僅空格混淆。