Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

  • Ajax request is made to dialog.php
  • Server generates html and javascript that is specific to this dialog then encodes them as JSON
  • JSON is returned to client.
  • HTML is appended to the <body> then once this is rendered, the javascript is also appended into the DOM.

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?

like image 225
gordyr Avatar asked Mar 14 '12 11:03

gordyr


People also ask

What does jQuery remove do?

jQuery remove() Method The remove() method removes the selected elements, including all text and child nodes. This method also removes data and events of the selected elements. Tip: To remove the elements without removing data and events, use the detach() method instead.

What jQuery method is used to completely remove attributes from elements?

The removeAttr() method removes one or more attributes from the selected elements.

What is difference between remove and hide in jQuery?

hide() sets the matched elements' CSS display property to none . remove() removes the matched elements from the DOM completely. detach() is like remove() , but keeps the stored data and events associated with the matched elements.

Which method is used to remove the element from set content in jQuery?

The jQuery remove() method removes the selected element(s) and its child elements.


2 Answers

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.

like image 114
Niet the Dark Absol Avatar answered Oct 06 '22 00:10

Niet the Dark Absol


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);
like image 41
Tomás Müller Avatar answered Oct 06 '22 00:10

Tomás Müller