questions

White spaces (node) in html between element

Rate this post

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        "

 

✔️Solution:

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);}
  }
}

Leave a Reply

Your email address will not be published.

Back to top button