jQuery - How to remove a DOM element BEFORE complete page load

Question

Now this may seem like a silly question, but I need to know how to remove a DOM element BEFORE it is displayed to the user. In short, I am using a div that has a background image alerting the user to enable javascript before proceeding. If the user has javascript enabled I am using jQuery to remove the DOM element, in this case $(".check-js") which is the div housing the image.

Using the conventional methods to unload DOM objects as follows does not work because it waits for the page load to complete, then removes the element, causing the image to flicker on and off each time the page loads:

$(function(){
    $(".check-js").css( {display:"none"} )
})

I simply want to remove the div if the user has js enabled, and he must never see this div.

Any suggestions and I will be grateful, thanks.

Answer 1

Why not just show the image inside a <noscript></noscript> block?

You'll get much better results since you're not relying on the timing of Javascript and the DOM (which behaves differently in every browser anyway).

Answer 2

I don't think you can delete a dom node before dom has been parsed. It will be interesting to know if there is a workaround to this.