Remove a noscript tag inside the head tag with JavaScript
Question
I am trying to remove a <noscript> tag with JavaScript. But every attempt so far has failed.
I tried these:
// The noscript tag has a id. I'm accessing it over this id
var noscript = window.document.getElementById("noscript_with_id");
noscript.parentNode.removeChild(noscript); // noscript.parentNode is null
noscript.outerHTML = ""; // doesn't do anything
noscript.innerHTML = ""; // doesn't do anything
I must not use jQuery. Just plain JavaScript.
Since I am accessing the element over an specific ID and using it's content a working solution might be changing the ID or emptying the content. I need to remove it because the code working with the element might be executed several times.
The noscript tag is located inside the <head> tag. I use this to asynchronously load some stylsheets.
I set up a page with the problem. https://blitz.icon-craft.net/layout_test/
Check the console and https://blitz.icon-craft.net/includes/js/loadCSS.js
(I want to note that this site in fact uses jQuery. But I plan on using the script on sites that do not use it. It wouldn't make any sense including jQuery just for this tiny script.)
5 answers
solution1
2 2015-06-16 20:50:48
Assuming the <head> tag is the parent.
var noscript = document.getElementsByTagName('noscript');
var parent = document.getElementsByTagName('head')[0];
for(var i in noscript) {
parent.removeChild(noscript[i]);
}
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.
solution2
2 ACCPTED 2015-06-17 10:47:43
I figured out the problem. Removing the element works just as described here several times and just as I was doing it.
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.
Here is the not working code:
var noscript = window.document.getElementById("some_id");
var head = window.document.getElementsByTagName("head")[0];
head.innerHTML += noscript.innerHTML; // After that noscript is no longer valid
head.removeChild(noscript); // Won't work
The following will work:
var noscript = window.document.getElementById("some_id");
var head = window.document.getElementsByTagName("head")[0];
var content = noscript.innerHTML;
head.removeChild(noscript);
head.innerHTML += content;
Thank you for your help anyway.
solution3
1 2015-06-16 20:47:52
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.
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 .
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.
Here's a working sample:
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
<!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>
solution4
0 2019-08-26 04:04:51
Remove a noscript tag with JavaScript
var noscr = document.getElementsByTagName('noscript').length;
for(var yh = 0;yh<noscr;yh++) {document.getElementsByTagName('noscript')[0].remove();}
solution5
0 2022-07-16 12:02:41
None of the answers worked for me and I had the 'noscript' tag in body. Below code worked eventually:
var elem = document.querySelector('noscript');
elem.parentNode.removeChild(elem);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.