javascript - 在 Javascript 中从 HTML 字符串中删除空节点

Question

我正在开发一个 HTML 模板，我必须通过 JavaScript 从 HTML 字符串中删除一些文本。问题是有时空标签会保留在 HTML 字符串中，因为内部内容被删除。

<ul>
<li><strong style="font-size: 10pt;"></strong><span style="font-size: 10pt;"> </span></li>
</ul>
<p><span>. Nunc sodales ullamcorper purus, in pharetra quam dictum at. Nullam iaculis, ex ut gravida commodo, nisi odio volutpat sapien, ut mattis eros est vel turpis. Nunc at eros quis nisl efficitur sagittis. Aliquam sed risus nec ex suscipit placerat. </span></p>
<ul>
<li>In hac habitasse platea dictumst. In congue velit sodales ipsum tincidunt, et ullamcorper massa consectetur.</li>
<li>Nulla id ex eu elit congue consequat at ut odio. Nullam risus lorem, auctor ac nibh sed, suscipit condimentum augue.</li>
</ul>

正如您在第一个 ul 标签中看到的那样，其中有多个空标签，我想将其删除，否则它会创建一个空白的项目符号列表项。

var tempDiv = document.createElement('div');
tempDiv.innerHTML = str;
str = CleanChildren(tempDiv);

function CleanChildren(elem)
                {
                    var children = elem.childNodes;
                    var len = elem.childNodes.length;
                    document.getElementById("remarksContinue").innerHTML = "No of Child Node :: " + len;
                    for (var i = 0; i < len; i++)
                    {
                        var child = children[i];

                        if(child.hasChildNodes())
                            CleanChildren(child);
                        else
                            elem.removeChildNode(child);

                    }

                    return elem.innerHTML;
                }

上面是我尝试使用但没有运气的功能。提前致谢

Answer 1

这里不需要递归 - 只需检查外部元素的 textContent ，如果其 trimmed 值为空字符串，则删除该元素:

const container = document.querySelector('div');
console.log(container.children.length);

Array.prototype.forEach.call(
  container.children,
  node => {
    if (node.textContent.trim() === '') node.remove();
  }
);

console.log(container.children.length);

<div>
  <ul>
    <li><strong style="font-size: 10pt;"></strong><span style="font-size: 10pt;"> </span></li>
  </ul>
  <p><span>. Nunc sodales ullamcorper purus, in pharetra quam dictum at. Nullam iaculis, ex ut gravida commodo, nisi odio volutpat sapien, ut mattis eros est vel turpis. Nunc at eros quis nisl efficitur sagittis. Aliquam sed risus nec ex suscipit placerat. </span></p>
  <ul>
    <li>In hac habitasse platea dictumst. In congue velit sodales ipsum tincidunt, et ullamcorper massa consectetur.</li>
    <li>Nulla id ex eu elit congue consequat at ut odio. Nullam risus lorem, auctor ac nibh sed, suscipit condimentum augue.</li>
  </ul>
</div>