3

I am appending a child element with a reference to at javascript and a stylesheet, but I would like to delete it again when there is no use of it anymore.

        var head = document.getElementsByTagName('head')[0];

        // We create the style
        var style = document.createElement('link');
        style.setAttribute("rel", "stylesheet");
        style.setAttribute("type", "text/css");
        style.setAttribute("href", '_css/style.'+app+'.css');

        var script = document.createElement('script');
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", '_scripts/_js/script.'+app+'.js');

        // And the append the style
        head.appendChild(style);
        head.appendChild(script);

This is how I append the scripts and it works perfectly.. But I can't figure out how to delete the tags again from the head tag in HTML.

Does anybody know how to remove the tags from the header tag again.. I have been searching all around Stackoverflow but nobody actually seem to have this kind of problem, but if anybody knows there is another question answering this, please tell me..

Corfitz.
  • 1,864
  • 3
  • 31
  • 53
  • 2
    Why do you want to remove it? – Christofer Eliasson Apr 13 '13 at 10:33
  • 1
    The edit to your question is probably really a new question – OlduwanSteve Apr 13 '13 at 10:39
  • I was told that it was important to "garbage collect".. And I wanted to delete unneeded scripts while working.. I am working on making a site completely builded on dynamic access to content and I want to prevent to many page refreshes. – Corfitz. Apr 13 '13 at 10:39
  • @OlduwanSteve Yeah.. I deleted it again.. didn't think it all the way through – Corfitz. Apr 13 '13 at 10:40
  • 1
    @PhilipJensBramsted: Garbage collection is a rather different concept to deleting scripts added dynamically. Internally, the "garbage" will not necessarily be removed, even if you delete the ` – Qantas 94 Heavy Apr 13 '13 at 11:31

4 Answers4

6

In short, You Cant, Even if you remove the scripts tags, those scripts are in the memory and there is no remove them.

One hack is to write a script that identifies what the other scripts are doing (adding events, creating variables, functions etc)and then neutralize them

But the real way to solve this problem is to write your scripts in a closure,so that they are removed from the memory as soon as the program control is out of their scope.

You might also want to dig into Require.js

Community
  • 1
  • 1
Atif
  • 10,623
  • 20
  • 63
  • 96
3

You can remove elements using removeChild:

var head = document.getElementsByTagName('head')[0];

//removing them from the head, where you added them
head.removeChild(script);
head.removeChild(style);

However:

  • Removed style/link elements will remove the styles defined in them.
  • But JS can't be unloaded this way. They will remain in memory. It would be better if you had some logic to manage your scripts, like some dependency manager.

Thus removing style/link elements might have some use, but there is no use removing script elements.

Joseph
  • 117,725
  • 30
  • 181
  • 234
  • Yeah I've tried that... But I can't seem to select the element I want to remove.. But yeah.. I understand that there is no need of deleting it.. But would there be a way to check if the tag already have been appended once? To prevent that my script appends the same script over and over again? – Corfitz. Apr 13 '13 at 10:37
  • @PhilipJensBramsted keep the reference, which in your case are the `script` and `style` variables. – Joseph Apr 13 '13 at 10:39
  • 2
    "But JS that has been loaded can never be unloaded." Actually there are situations where you can nullify it. – PeeHaa Apr 13 '13 at 10:41
  • It is separated it two different functions.. How should I store the variables? – Corfitz. Apr 13 '13 at 10:41
  • 1
    @PhilipJensBramsted you store them in arrays or within "tracking objects" or instances of classes or libraries for that matter. [I have done a similar thing, in CSS where I switch on/off styles.](https://github.com/fskreuz/spray) – Joseph Apr 13 '13 at 10:43
  • @PeeHaa埽 that is if you have some "destructor" built for the stuff in those scripts. – Joseph Apr 13 '13 at 10:44
  • Doesn't the garbage collector handle that when I have let's say: `var foo = function () { console.log('whatever'); }; foo = null;`? @JosephtheDreamer – PeeHaa Apr 13 '13 at 10:50
  • @PeeHaa埽 The problem is when there are closures, and when you have no track of which references what. If you don't know them, there may be lingering references, and GCs don't collect objects that still have references. – Joseph Apr 13 '13 at 10:57
  • I get that, but am I correct that your statement is wrong about once JS has been loaded it can never be unloaded? I don't know exactly how the JS GC works. – PeeHaa Apr 13 '13 at 10:58
  • @PeeHaa埽 Partially. You don't unload the script by just deleting the script tag, unlike removing the style tag which also unapplies the styles defined. – Joseph Apr 13 '13 at 11:01
  • @PhilipJensBramsted in current browsers you can give an `id` to the script tag (e.g. ` – excentris Apr 13 '13 at 11:17
  • @netrunner I already thought about that, but as you say `current browsers`.. It annoys me that it doesn't work in every browser.. – Corfitz. Apr 13 '13 at 11:58
0
document.getElementsByTagName('head')[0].removeChild(document.getElementsByTagName('head')[0].getElementsByTagName('script')[0]);
monkeyinsight
  • 4,719
  • 1
  • 20
  • 28
0

I'm afraid we cannot remove script tags. Even if you remove it, the script has already been executed and cannot be undo.

For example: in test.js file

window.Test = "aaa";

When we reference this script, the browser will download and automatically execute all the statements in the file. When we remove the script tag, the statements have been executed (window variable already has the property Test)

Khanh TO
  • 48,509
  • 13
  • 99
  • 115