CODEWITHSUNDEEP
javascriptjquery
gordyr
gordyr

Reputation: 6276

Does jQuery .remove() clear out loaded javascript when it is used to remove a script tag?

As the title says, if I remove a script tag from the DOM using:

$('#scriptid').remove();

Does the javascript itself remain in memory or is it cleaned?

Or... am I completely misunderstanding the way in which browsers treat javascript? Which is quite possible.

For those interested in my reason for asking see below:

I am moving some common javascript interactions from static script files into dynamically generated ones in PHP. Which are loaded on demand when a user requires them.

The reason for doing this is in order to move the logic serverside and and run a small script, returned from the server, clientside. Rather than have a large script which contains a huge amount of logic, clientside.

This is a similar approach to what facebook does...

Facebook talks frontend javascript

If we take a simple dialog for instance. Rather than generating the html in javascript, appending it to the dom, then using jqueryUI's dialog widget to load it, I am now doing the following.

The javascript is executed automatically upon insertion and the dynamic dialog opens up.

Doing this has reduced the amount of javasript on my page dramatically however I am concerned about clean up of the inserted javascript.

Obviously once the dialog has been closed it is removed from the DOM using jQuery:

$('#dialog').remove();

The javascript is appended with an ID and I also remove this from the DOM via the same method.

However, as stated above, does using jQuery's .remove() actually clean out the javascript from memory or does it simple remove the <script> element from the DOM?

If so, is there any way to clean this up?

Upvotes: 20

Views: 39189

Answers (2)

Tom&#225;s M&#252;ller
Tom&#225;s M&#252;ller

Reputation: 314

If your scripts have already executed removing the DOM elements are not going to get rid of them. Go to any page with JavaScript, open up your preferred javascript console and type $("script").remove(). Everything keeps running.

And this demonstrates @Kolink answer:

http://jsfiddle.net/X2mk8/2/

HTML:

<div id="output"></div>

<script id="yourDynamicGeneratedScript">
  function test(n) {
    $output = $("#output")
    $output.append("test " + n + "<br/>")
  }
  test(1);
</script>

Javascript:

$("script").remove();
// or $("#yourDynamicGeneratedScript").remove();

test(2);
test(3);
test(4);

function test(n) {
  $output = $("#output")
  $output.append("REDEFINED! " + n + "<br/>")
}

test(5);
test(6);
test(7);

Upvotes: 4

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

No. Once a script is loaded, the objects and functions it defines are kept in memory. Removing a script element does not remove the objects it defines. This is in contrast to CSS files, where removing the element does remove the styles it defines. That's because the new styles can easily be reflowed. Can you imagine how hard it would be to work out what a script tag created and how to remove it?

EDIT: However, if you have a file that defines myFunction, then you add another script that redefines myFunction to something else, the new value will be kept. You can remove the old script tag if you want to keep the DOM clean, but that's all removing it does.

EDIT2: The only real way to "clean up" functions that I can think of is to have a JS file that basically calls delete window.myFunction for every possible object and function your other script files may define. For obvious reasons, this is a really bad idea.

Upvotes: 21

Related Questions