hiding a html tag on page load with JavaScript or jQuery

I have this fiddle which contains html, css and jquery code.


In the HTML portion of my fiddle I have this code:

    <div id="Div1">
        <span id="Span1"></span>
        <div id="Div2">
        <span id="Span2"></span>
        <div id="Div3">

Open in new window

I'm trying to hide the span tag with this id="Span1 on page load from completely being rendered in the browser.

If you run this fiddle in Google Chrome and look at the html rendered inside Div1 it looks like this:

running in chrome
I noticed the html for the span tag rendered in google chrome is this.

<span id=Span1" style="display: none;"></span>

My fiddle just hide its visibility but I actually want to keep the span tag from being completely rendered not just made invisible.  

So this span wasn't hidden. just some css was added to it.

Is there a way to use JavaScript or jQuery to completely hide this Span tag so it is not rendered in the web browser?
I don't want just the display:none tag added to it like my fiddle is currently doing.
Who is Participating?
Moussa MokhtariConnect With a Mentor EnterpreneurCommented:
remove it like this
maqskywalkerAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.