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

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. /
Check the console and .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.)

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.

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/layout_test/
Check the console and https://blitz.icon-craft/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.)

Share Improve this question edited Jun 16, 2015 at 21:12 asked Jun 16, 2015 at 20:19 BrainStone 3,2157 gold badges35 silver badges67 bronze badges

When are you running the Javascript code? Has the noscript element been parsed at that time? – Guffa Commented Jun 16, 2015 at 20:23
I don't think <noscript> is part of the DOM and the content only would be if JS was disabled. – Leeish Commented Jun 16, 2015 at 20:23
4 Why would you want to remove a noscript element with JS? The very fact that you're running JS means that noscript has no effect, it might not even get inserted into the DOM since it's useless. – Daniel Imms Commented Jun 16, 2015 at 20:23
Possible duplicate stackoverflow./questions/18942856/… – Leeish Commented Jun 16, 2015 at 20:24
2 @DuncanThacker, your fiddle doesn't do anything(?) Here's a fiddle that shows that noscript.parentNode.removeChild(noscript) works: jsfiddle/r2srnx34 – Rick Hitchcock Commented Jun 16, 2015 at 20:32

| Show 7 more ments

6 Answers 6

Sorted by: Reset to default 2

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.

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.

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>

Remove a noscript tag with JavaScript

var noscr = document.getElementsByTagName('noscript').length;
    for(var yh = 0;yh<noscr;yh++) {document.getElementsByTagName('noscript')[0].remove();}

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);

heres a simple way to do it

document.querySelectorAll("[unwrap]").forEach(function(a){a=a.textContent;a=document.createRange().createContextualFragment(a);document.body.appendChild(a)});

 <noscript unwrap>
  <link href="some_css.css" rel="stylesheet">
  <h1>Hello World</h1>
 </noscript>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745584484a4634449.html

dom - Remove a noscript tag inside the head tag with JavaScript - Stack Overflow

6 Answers 6

发表回复

评论列表（0条）

联系我们

400-800-8888

dom - Remove a noscript tag inside the head tag with JavaScript - Stack Overflow

6 Answers 6

相关推荐