從 DOM 中刪除空節點元素

Question

在沒有 jQuery 的情況下從 dom 中識別和刪除空元素的最佳方法是什么？

如果我的代碼如下所示：

<div>
    <div>
        <p></p>
    </div>
    <div>
        <p>Some content</p>
    </div>
</div>

擺脫空的<p>和<div>的最佳方法是什么？

我試過這個： https : //www.sitepoint.com/removing-useless-nodes-from-the-dom/但由於某種原因它清除了我跨度中的所有空間。

Answer 1

您可以使用querySelectorAll獲取某個類型的所有元素，然后確定該元素是否具有innerText 。

 var wrapper = document.querySelector('.content-wrapper'); var ps = wrapper.querySelectorAll('p'); for (var p = 0; p < ps.length; p++) { if (ps[p].innerText === '') { wrapper.removeChild(ps[p].parentNode); } } var divs = wrapper.querySelectorAll('div'); for (var d = 0; d < divs.length; d++) { if (divs[d].querySelectorAll('p').length === 0) { wrapper.removeChild(divs[d]); } }

 .content-wrapper { height: 100%; width: 100%; } .content-wrapper>div { width: 100%; height: 100px; color: #fff; }

 <div class="content-wrapper"> <div style="background-color: red;"> </div> <div style="background-color: green;"> <p> </p> </div> <div style="background-color: blue;"> <p> Text! </p> </div> </div>

Answer 2

您可以使用:only-child偽類來選擇作為父元素唯一子元素的元素，刪除節點，然后檢查父節點是否有.children ，如果沒有則刪除父節點

 let nodes = document.querySelector("div") .querySelectorAll(":only-child"); nodes.forEach(node => { if (!node.childNodes.length) { let parent = node.parentNode; node.parentNode.removeChild(node); if (!parent.children.length) { parent.parentNode.removeChild(parent) } } }); console.log(document.querySelector("div").innerHTML);

 <div> <div> <p></p> </div> <div> <p>Some content</p> </div> </div>

Answer 3

您可以嘗試構建一個遞歸函數，檢查元素的innerHTML是否為空以將其全部刪除：

function recursiveCleaner(el){
  if (el.childNodes.length > 0) {
    for(var i=0;i<el.childNodes.length;i++){
      recursiveCleaner(el.children[i]);
    }
    for(var i=0;i<el.childNodes.length;i++){
      if(el.children[i].innerHTML === "") el.removeChild(el.children[i]);
    }
  }
}

Answer 4

我會使用TreeWalker來遍歷 DOM 並找到空節點。

在下面的例子中，一個空節點被認為是一個內部沒有任何文本的節點，無論樹的深度或空格如何。 只有當一個節點沒有子節點時，它也可以被認為是空的。

 var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT) var currentNode = treeWalker.currentNode var emptyNodes = [] // test if a node has no text, regardless of whitespaces var isNodeEmpty = node => !node.textContent.trim() // find all empty nodes while(currentNode) { isNodeEmpty(currentNode) && emptyNodes.push(currentNode) currentNode = treeWalker.nextNode() } // remove found empty nodes emptyNodes.forEach(node => node.parentNode.removeChild(node)) // print DOM console.log(document.body.firstElementChild.outerHTML)

 <div> <div> <p></p> </div> <div> <p>Some content <a></a></p> </div> </div>

請注意，在使用 TreeWalker 遍歷 DOM 時，不應刪除節點，因為它會擾亂“實時”DOM 迭代。