How do I remove functions from memory in Javascript after using Jquery .html() function to replace a <div> with a <script> included?

Question

Below is an example of a problem I am having. I am using $(locator).html(data) to replace a DIV after an ajax call. The issue is that the DIV also have a SCRIPT tag inside it, and those functions in that SCRIPT tag are remaining in memory after I .empty() that DIV.

Is there a way to remove/de-register/undefine all functions in the SCRIPT tag automatically/programmatically? I guess I thought the Jquery .empty() would do that, but I guess not. I think I could do something manual like test1 = undefined but I don't want to have to explicitly do that for all the functions.

Thanks.

EDIT: I am working on a legacy product, so there are dozens of html files with dozens of functions that could be loaded for the newString variable. So my goal is not to change any of those, but to solve this lingering-function issue at the time of .empty() and .html() when replacing the div contents.

EDIT 2: And I can't just "delete" the function, because I don't always know what the function(s) will be. I need to do this programmatically. (seems I keep getting flagged as a duplicate question, but again, I can't delete what I don't know yet)

function change () {
  // this newString is mock html data coming back from an ajax call
  let newString = "<p>Reloaded page</p>";
  
  console.log("#emptyme HTML before empty():")
  console.log($("#emptyme").html());

  $("#emptyme").empty();
  
  console.log("#emptyme HTML AFTER empty():")
  console.log($("#emptyme").html());
  
  $("#emptyme").html(newString);
  
  if (typeof test1 !== "undefined") {
    $("#error").html("test1() WAS STILL FOUND!!");
    console.log("test1() WAS STILL FOUND!!  Function definition from memory is:");
    console.log(test1);
  }
  console.log("finished change function.");

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="emptyme">
    <p>
    Initial page
    </p>
    <script>
        function test1 () {
        console.log("this is test1 function.");
      }
    </script>
  </div>
  <button onclick="change()">
    load change
  </button>
  <div id="error">
  
  </div>
</body>
</html>

Does this answer your question? Javascript delete a function "I could do something manual like test1 = undefined but I don't want to have to explicitly do that for all the functions." - you have to... — ikiK
– ikiK, Commented Mar 4, 2021 at 0:31
Changing structural DOM has immediate effects on the page, but JS, once executed, will remain in memory unless no longer referenced. What you seek to do cannot be done, as once loaded, function definitions are no longer tied to their original scripts. The only way to change them is to modify their definitions via JS. — tucuxi
– tucuxi, Commented Mar 4, 2021 at 0:51
@ikiK thanks, but how do I get a list/array of all of the functions/variables in that specific <script> tag? I won't really know what they all are at the time when I empty and refill the div with new content. (thanks also to @tucuxi) — Atom999
– Atom999, Commented Mar 4, 2021 at 15:01
I haven't done that so far, but check this topic: stackoverflow.com/questions/3853274/… , or do some more digging. — ikiK
– ikiK, Commented Mar 4, 2021 at 15:14

JonoJames · Accepted Answer · 2021-03-04 01:27:24Z

1

JavaScrip has an internal garbage collection and your code does not have to destroy things like you would do in C++

However, at Certain times we would want to "destroy a function" where it is resources expensive Because js runs from top to bottom you can overwrite that function if you have called it in a variable later in the program to free up those resources. Or even do it later in the logic of the program

   var ExpensiveFunction =( function () {
 //..code
function getRidOfthis1(){ console.log("foo1"); }
function getRidOfthis2(){ console.log("foo2"); }
function getRidOfthis3(){ console.log("foo3"); }
function getRidOfthis4(){ console.log("foo4"); }

//initiate an internal reference to them 
ExpensiveFunction.getRidOfthis1 = getRidOfthis1;
ExpensiveFunction.getRidOfthis2 = getRidOfthis2;
ExpensiveFunction.getRidOfthis3 = getRidOfthis3;
ExpensiveFunction.getRidOfthis4 = getRidOfthis4;

}  );

//Functions available outside of the nesting 
ExpensiveFunction()
ExpensiveFunction.getRidOfthis1();
ExpensiveFunction.getRidOfthis2();

// overidding it 
ExpensiveFunction =0

edited Mar 4, 2021 at 1:27

answered Mar 4, 2021 at 0:43

JonoJames

1,22310 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tucuxi Over a year ago

this does not answer the question of "why do my old definitions remain, and how can I remove them without overwriting them one by one"

JonoJames Over a year ago

Yes But the point is you can place all the function definition nested under one main function and just destroy the holding container of the group of functions he wants to destroy

JonoJames Over a year ago

Adjusted it to reflect that

tucuxi Over a year ago

as written, your functions are not accessible from outside ExpensiveFunction. A pitfall of your approach is that, if they are accessible from outside (which you can assume is the case for OP), direct references to those functions would not be affected by setting ExpensiveFunction to a different value.

JonoJames Over a year ago

You have a point there so showed how to initiate those function from outside of the nested scope initialization them as object names much like a constructor

|

Collectives™ on Stack Overflow

How do I remove functions from memory in Javascript after using Jquery .html() function to replace a <div> with a <script> included?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related