使用 Javascript 删除空的孩子

Question

我尝试使用 JavaScript 删除空节点，因为导航器计算 return 行或 space 就像 child 节点

所以，我尝试了这个，首先它工作正常，但是如果我第二次计算节点，它会给我一个数字（包含空节点），尽管我做了 removechild

我的代码：

  function testing(){
      var c = document.body.childNodes;
      for(i=0;i<c.length;i++){
        if(c[i].nodeName == "#text")
        {
          var rest = c[i].textContent;
          if(rest.length == 0){
            //I want to remove the empty nodes
            document.body.removeChild(document.body.childNodes[i]);
          }
        }
      }
      
      //this give a number contains the empty nodes
      var d =document.body.childNodes.length;
      alert(d);


    }

我的HTML代码

<body onclick="testing()">
    <p>test</p>
    <p>test1</p>
  </body>

如果我想知道这个 HTML 代码的长度，导航器会给我 5 而不是 2 （它是计算 return 行和 space)

因此，为此我想删除取结果的空节点 2

Answer 1

if(c[i].nodeName == "#text")

在这一行你检查它是否是一个 #text 节点但是在你的 html 中是 p 个元素。

var rest = c[i].textContent;
if(rest.length == 0){
    //I want to remove the empty nodes
    document.body.removeChild(document.body.childNodes[i]);
}

还有那些行，你检查元素的内容是否为空，这在你的两个 p 元素中也不是。

因此您的警报应正确包含 2。

如果您的问题是 text 元素在 body 元素中包含空格和换行符，您可以使用 regex.

检查它们

只需更改此行

if(rest.length == 0){

到

if(/^[\s\n]{0,}$/.test(rest)){

为了完整起见：

更改以下行

for(i=0;i<c.length;i++){

到

for(i=len -1;i>=0;i--){

如@Bindrid 的回答所述，因为您可能会错过 elements。

所以完整的代码应该是

function testing(){
  var c = document.body.childNodes;
  for(var i = c.length; i >= 0; i--) {
    if(c[i].nodeName == "#text") {
      var rest = c[i].textContent;
      if(/^[\s\n]{0,}$/.test(rest)) {
        //I want to remove the empty nodes
        document.body.removeChild(document.body.childNodes[i]);
      }
    }
  }
      
  //this give a number contains the empty nodes
  var d =document.body.childNodes.length;
  alert(d);
}

Answer 2

一个元素在没有内容时被认为是empty，空格，行return被认为是内容。所以，你有两种方式取决于你需要什么。如果您需要真正的空元素，请使用 document.querySelectorAll(':empty')，否则，请使用 document.body.childNodes 并使用 String.prototype.trim 检查其内容是否为空。希望对你有帮助。

<div>
  
</div>


<section></section>

function isTextNode(element) {
  return element.nodeType === 3;
}

function removeEmptyTextNodes(element) {
  if(!isTextNode(element)) { return; }
  
  var content = (element.textContent || "").trim();
  if(content.length > 0) { return; }
  
  console.log("removing", element);
  element.parentNode.removeChild(element);
}


Array.prototype.forEach.call(
  document.body.childNodes, removeEmptyTextNodes
);

<div>
  
</div>

<span></span>

Answer 3

听起来你想多了。您已经观察到 childNodes 和 children 之间的区别，即 childNodes 包含所有节点，包括完全由空格组成的文本节点，而 children 只是作为元素的子节点的集合。这就是它的全部内容。

 function testing(){
      alert(document.body.children.length);
      var c = document.body.children;
      for(i=0;i<c.length;i++){
        if(c[i].innerHTML == "")
        {
            //I want to remove the empty nodes
            document.body.removeChild(c[i]);
        }
      }
      
      //this give a number contains the empty nodes
      var d =document.body.children.length;
      alert(d);


    }

<body onclick="testing()">
    <p>test</p>
    <p>test1</p>
    <p></p>
  ss
  </body>

Answer 4

  for(i=0;i<c.length;i++){
    if(c[i].nodeName == "#text")
    {
      var rest = c[i].textContent;
      if(rest.length == 0){
        //I want to remove the empty nodes
        document.body.removeChild(document.body.childNodes[i]);
      }
    }
  }

实际上应该如下所示，以考虑到您在运行通过列表时正在删除节点。如果节点 7 和 8 为空并且您删除了 7，则当您处于 7 循环中时 8 变为 7，因此 8 因为新的 7 在下一个循环中丢失。

var len = c.length;
for(i=len -1;i>=0;i--){
    if(c[i].nodeName == "#text")
    {
      var rest = c[i].textContent;
      if(rest.length == 0){
        //I want to remove the empty nodes
        document.body.removeChild(document.body.childNodes[i]);
      }
    }
  }

使用 Javascript 删除空的孩子

Drop empty childrens using Javascript

javascript

jquery

nodes

removechild