html中元素之间的空格（节点）答案

【问题标题】：White spaces (node) in html between elementhtml中元素之间的空格（节点）
【发布时间】：2021-03-12 14:47:08
【问题描述】：

为什么在我的网站中，我在特定插件的元素之间看到白色节点？

这是一个 WordPress，这个空格在元素之间，我想删除它，但使用 DOM 我无法选择它。我尝试更改主题并且插件运行完美，所以我认为这是主题的问题但我无法更改它。

那么我该如何解决？我可以使用 CSS/JavaScript/jQuery 删除/隐藏它吗？如果我使用 Inspector 并单击“在控制台中使用”，它会显示一些信息：

#text

assignedSlot: null

childNodes: NodeList []

data: "\n        "

firstChild: null

isConnected: true

lastChild: null

length: 9

nextElementSibling: null

nextSibling: null

nodeName: "#text"

nodeType: 3

nodeValue: "\n        "

textContent: "\n        "

wholeText: "\n        "

【问题讨论】：

标签： javascript html jquery css wordpress

【解决方案1】：

白色节点由元素节点的开始和结束标记之间的文本数据创建，您的文本数据是¨/n¨，换行符和空格，如果要隐藏这些白色节点，您必须删除每个文本子节点使用父 element_node 的 removeChild(text_node) 方法的节点，或者不要在源文档的元素内创建文本数据（¨/n¨）。文档内的文本数据示例。

<HTML> 
<HEAD> 
<TITLE> A Simple Page </TITLE>
 </HEAD> 
<BODY> 
<P ID=”paragraph1”>
 This is the <--! For example this line is Text Data for P element --> 
<EM ID=”emphasis1”>
 one and only  <--! This line is Text Data for EM element -->
 </EM>
 paragraph on the page.  <--! This line ii  Text Data for P element --> /P> 
</BODY> 
</HTML

删除父元素节点内的文本节点的示例。仅从元素父节点中删除中间文本子节点：

function Remove_TextNode(parent_node) {
 for (i = 0 ; i < parent_node.childNodes.length; i++) {
    if (parent_node.childNodes.item(i).nodeName =="#text"){
         parent_node.removeChild(parent_node.childNodes.item(i));  
         Remove_TextNode(parent_node);}
  }
}

【讨论】：