21

If I have the following JavaScript code:

<script id="someJS">

    var boom = 'boom';

    function example(){

        alert(boom);
    }

</script>

and then do:

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

I can still call example() even though that JavaScript function is no longer inside the DOM... How can I remove it?

I don't want to null the actual function(s) and variables with: boom = null; example = null; as I don't always know what is inside the JavaScript file. For example the function names, variables, etc. I need to be able to remove the entirity of what was inside that script tag.


Update: For those that wanted to know the user case for this:

Basically in an app I am working on, we have custom JavaScript added for certain clients that when a button is clicked e.g. save, then checks if certain functions exist and then runs them. However because this save button is generic it means that that the custom code gets called all the time after it's added even if it's no longer relevant.

The solution we have come up with (someone had posted this as an answer but they removed it for some reason) was to namespace it all like:

DynamicJS = {

    boom: 'boom',

    example: function(message) {

        alert(message);

    }

}

And then we can just do: delete DyanmicJS;

Which removes all the functions and variables inside this namespace from the global scope, effectively binning off what the script file added.

Although I am sure this is not a perfect solution as if you had event listeners inside the file, I'm sure they would still exist!

9
  • 6
    "I don't want to null the actual function, as I don't always know what is inside the JS file." What exactly do you mean by that?
    – Cerbrus
    Apr 30, 2015 at 14:30
  • As in example= null;
    – Cameron
    Apr 30, 2015 at 14:32
  • 1
    Why do you want to remove a function anyway? what is the negative aspect of still having it? Apr 30, 2015 at 14:33
  • That will be the only way
    – MightyPork
    Apr 30, 2015 at 14:33
  • 5
    There are some answers below to do what you asked... but I may pose What is the real problem? meta.stackexchange.com/a/66378/278651
    – BReal14
    Apr 30, 2015 at 14:33

6 Answers 6

39

How can I remove it? I don't want to null the actual function, as I don't always know what is inside the JS file.

You can't. Script code is executed, creates things in the JavaScript environment, and is completely disconnected from the script element that loaded it. Other than completely reloading that environment, if you don't know what the code did, you can't undo it.

Even if you could infer some of what the code did (for instance, by making a list of globals before and after), while you could remove new globals you detected (or at least set them to null or undefined, since delete doesn't work wiith globals added via function declarations or var), that doesn't tell you what event handlers, web workers, etc. the code may have hooked up.

2
  • 4
    This is probably the most appropriate answer here, especially relevant to the OP's request: if you don't know what the code did, you can't undo it. Apr 30, 2015 at 14:43
  • 1
    @RGraham Or, in a short sentence: You can't un-run what already ran. Apr 30, 2015 at 18:18
16

$('#someJS').remove(); only removes the script element from the page.
By the time the element is removed, the script has already been interpreted, which means example has been added to the global scope.

To properly remove that function you could do this:

window.example = null;

However, apparently you don't want to do this, and this will result in a load of errors if there's script elsewhere that actually uses example.

An alternative could be to assign an empty function to it:

window.example = function(){};

This will prevent the "removal" from resulting in errors.
(Aside from the function not returning values when that may be expected)

0
7

Once the function has been processed, it is now part of the window's executable list of functions - regardless of if you remove the original source or not.

To remove the function entirely, try:

window['example'] = null;

However, based on your last comment:

I don't want to null the actual function, as I don't always know what is inside the JS file.

It sounds like you want to maintain reference to the function but not have it executable directly? If that's the case, you can store a reference to it and remove the original:

var _exampleBackup = window['example'];
window['example'] = null;

To call it, you can now use:

_exampleBackup();

And to restore it, if you need to:

window['example'] = _exampleBackup;
example();
3
  • Apparently, this is exactly what the OP doesn't want. (For some reason...)
    – Cerbrus
    Apr 30, 2015 at 14:37
  • @Cerbrus whoah, totally missed that last comment! Just updated my answer to address - thank you very much for pointing it out... total *facepalm* moment =P Apr 30, 2015 at 14:41
  • It should be made clearer that "Once the function has been processed" refers to the <script> tag and its content being processed, not (as one might interprete the sentence) that the funciton has been called. - Interestingly, the OP's remove() could safely be called from within the script being "removed" Apr 30, 2015 at 20:18
6

That function is still in the window.

Code that you put inside a script tag will be ran when the element is created and has no value (roughly) by itself anymore. Removing the tag will not affect the document and the impact it had on it (generally).

To remove the function you need to remove the example property on the window object, which is how the function will be defined, running the code above.

4
  • 1
    I'm gonna nitpick a bit: The place the function is stored has nothing to do with the "DOM". It's stored on the global execution context
    – Cerbrus
    Apr 30, 2015 at 14:42
  • @Cerbrus which happens to be the window in the browser :P
    – php_nub_qq
    Dec 19, 2020 at 8:18
  • Did you really have to respond to a comment I left 5 years ago?
    – Cerbrus
    Dec 19, 2020 at 9:17
  • @Cerbrus yeah, I was busy, sorry.
    – php_nub_qq
    Dec 19, 2020 at 9:21
1

$('#someJS').remove();does nothing more than removing the text from the DOM, but does nothing to the actual function (nor the file), since it is parsed and executed.

In order to delete the function, you could either set it to null or simply overwrite it with example=function(){};

0

JavaScript Hoisting

There is a concept in JavaScript called Hoisting. In this phase, compiler parse all JavaScript code and declares variables and function at the beginning of scope. In your case, function example and variable boom is already declared and kept in memory. When you run that method, interpreter will call that method and interpret it instead of interpreting actual JavaScript code. You are deleting script block after it went in memory. And thats why it is still executable.

Approaches to do this

1) Use object oriented approach. Add your method in a object, and when you want to delete it, delete that property by using delete. 2) Create one variable which holds a function which contains your code to execute, and set that variable undefined when you want.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.