Rectangle 27 0

dom Remove a noscript tag inside the head tag with JavaScript?


<!doctype html>
<html>
<head>
    <noscript>You appear to have javascript disabled</noscript>
    <script>
    window.addEventListener('load', onDocLoaded, false);
    function onDocLoaded(evt)
    {
    //  nukeNoscripts();
    }

    function nukeNoscripts()
    {
        var tgtTags = document.getElementsByTagName('noscript');
        alert("Num of noscript tags: " + tgtTags.length);
        var tgt = tgtTags[0];
        tgt.parentNode.removeChild(tgt);
        alert("Num of noscript tags: " + tgtTags.length);
    }
    </script>
</head>
<body>
    <button onclick='nukeNoscripts()'>NUKE</button>
</body>
</html>

EDIT: Code altered. (1) to fire on a button press, so you can see the effect in the DOM viewer of your browser's JS tools. (2) moved the noscript tag to the head

Firstly, you need to ensure that the tag exists when the javascript is called. I do this by waiting until all elements, images and scripts have been loaded.

Here's a working sample:

I forget the specifics, but I read about it the other day. either querySelector/querySelectorAll may have been the odd one out - returning an array that doesn't change as the document does. Dunno, probably mostly irrelevant here anyway.

Next, you don't need to use an id - you can grab it with any number of methods. The NodeList returned by getElementsByTagName is live and as such, changes size to reflect operations on the collection of elements it represents - this is why there's only one call needed to getElementsByTagName.

Note
Rectangle 27 0

dom Remove a noscript tag inside the head tag with JavaScript?


var noscript = window.document.getElementById("some_id");
var head = window.document.getElementsByTagName("head")[0];

var content = noscript.innerHTML;
head.removeChild(noscript);
head.innerHTML += content;

Here is the not working code:

I figured out the problem. Removing the element works just as described here several times and just as I was doing it.

The following will work:

The problem was that I changed the content of the parent (in this case the <head> tag) and therefore the object which i saved in a variable became invalid.

Note
Rectangle 27 0

dom Remove a noscript tag inside the head tag with JavaScript?


document.addEventListener('ready', function() { // that script }, false);
var noscript = document.getElementsByTagName('noscript');
var parent = document.getElementsByTagName('head')[0];
for(var i in noscript) {
    parent.removeChild(noscript[i]);
}

Assuming the <head> tag is the parent.

I am doing it like this but it is not working. It appears the noscript element is not in the DOM whe I try to remove it but it is when I read its content...

I tested this on SO site and it worked. The noscript tag lives inside the body tag so the code is obviously different to select the body tag.

It will fail if the noscript tags have different parents. Only the ones that are scoped to the parent you select will remove.

Note