javascript - 从 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

我会使用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 迭代。