What is #text and how to remove it?

Refresh

March 2019

Views

671 time

1

I'm using Bootstrap and I don't know if I'm doing it right but an unknown element with id "text" just came out from nowhere. Whenever I open the page on my browser, there are #text showing between each of <li> elements. If I inspect the page, those #text (s) are displaying as bullets.

This is the code I'm working on:

<ul class="list-inline">
    <li>
        <a href="#">
            <img src="images/laptops.jpg" alt="">
            <p>Laptops</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="images/tablets.jpg" alt="">
            <p>Tablets</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="images/desktops.jpg" alt="">
            <p>Desktops</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="images/monitors.jpg" alt="">
            <p>Monitors</p>
        </a>
    </li>
</ul>

Screenshot from browser inspector:

#text on browser

2 answers

1

They aren't elements and "text" is not an ID. They are text nodes which represent the whitespace characters between your tags in the DOM.

Remove the spaces, tabs and newlines from the source code if you want rid of them. They shouldn't be anything you need to care about though.


The bullets are just the normal bullets you get from a list item. Adjust the CSS list-style property if you want to change them.

1

As Quentin answered, #text are nodes. I'm sorry for saying those are elements. Since I'm not still relief that I will not see those nodes again, I search another way to remove them.

So I saw this sitepoint article by James Edward entitled "Removing Useless Nodes From the DOM". The article explains why should we clean DOM and how the code works. In case they'll take the page down (hopefully not), here's the posted function:

function clean(node) {
    for (var n = 0; n < node.childNodes.length; n ++) {
        var child = node.childNodes[n];
        if (child.nodeType === 8 || (child.nodeType === 3 && !/\S/.test(child.nodeValue))) {
            node.removeChild(child);
            n --;
        } else if(child.nodeType === 1) {
            clean(child);
        }
    }
}
clean(document);