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，如果不是，则删除父节点< / p>

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迭代。

从DOM中删除空元素

4 个答案: