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