White spaces (node) in html between element Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of White spaces (node) in html between element without wasting too much if your time.

The question is published on by Tutorial Guruji team.

Why in my site I see white nodes between element in particular plugin?

It is a WordPress and this white spaces are between element, I want to delete it but with DOM I can’t select it. I try to change theme and the plugin run perfectly, so I think it’s a problem of theme but I can’t change it.

So how I can fix? Can I delete/hide it with CSS/JavaScript/jQuery? If I use Inspector and click ‘use in console’ it show some information:

#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        "

enter image description here

Answer

The whites nodes are created by text data between the start and end tags of the elements nodes, your text data is ¨/n ¨, new line and white spaces, if you want hide these whites nodes you must remove each text child node using removeChild(text_node) method from parent element_node, or do not create text data(¨/n ¨) inside elements from source document. Example of text data inside document.

<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

Example to remove text nodes inside parent element node. Remove only inmediate text child nodes from element parent node:

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);}
  }
}
We are here to answer your question about White spaces (node) in html between element - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji