Removed JavaScript is still executable

Question

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!

_"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 '15 at 14:30
Why do you want to remove a function anyway? what is the negative aspect of still having it? — Sasanka Panguluri, Apr 30 '15 at 14:33
There are some answers below to do what you asked... but I may pose What is the real problem? http://meta.stackexchange.com/a/66378/278651 — BReal14, Apr 30 '15 at 14:33
see also: [what happens in asynchronous loading of webapps if some script delete the previously loaded or included scripts?](http://stackoverflow.com/q/14782688/1048572), [How can I remove script elements before they are being executed?](http://stackoverflow.com/q/10412651/1048572) or [Can I remove a javascript from the DOM with another Javascript?](http://stackoverflow.com/q/15662639/1048572) — Bergi, Apr 30 '15 at 18:51

T.J. Crowder · Answer 1 · 2015-04-30T16:38:10.980

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.

edited Apr 30 '15 at 16:38

answered Apr 30 '15 at 14:32

T.J. Crowder

1,031,962
187
1,923
1,875

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*. – CodingIntrigue Apr 30 '15 at 14:43
1

@RGraham Or, in a short sentence: *You can't un-run what already ran*. – Ismael Miguel Apr 30 '15 at 18:18

Cerbrus · Answer 2 · 2015-04-30T16:23:37.250

$('#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)

newfurniturey · Answer 3 · 2015-04-30T14:41:30.793

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();

edited Apr 30 '15 at 14:41

answered Apr 30 '15 at 14:32

newfurniturey

37,556
9
94
102

Apparently, [this is exactly what the OP doesn't want](http://stackoverflow.com/questions/29970467/removed-javascript-is-still-executable#comment48060679_29970467). (For some reason...) – Cerbrus Apr 30 '15 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 – newfurniturey Apr 30 '15 at 14:41
It should be made clearer that "Once the function has been processed" refers to the ` – Hagen von Eitzen Apr 30 '15 at 20:18

php_nub_qq · Answer 4 · 2015-04-30T14:44:08.220

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.

edited Apr 30 '15 at 14:44

answered Apr 30 '15 at 14:33

php_nub_qq

15,199
21
74
144

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](http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.1) – Cerbrus Apr 30 '15 at 14:42
@Cerbrus which happens to be the window in the browser :P – php_nub_qq Dec 19 '20 at 08:18
Did you really have to respond to a comment I left ___5 years ago___? – Cerbrus Dec 19 '20 at 09:17
@Cerbrus yeah, I was busy, sorry. – php_nub_qq Dec 19 '20 at 09:21

score 1 · Answer 5 · answered Apr 30 '15 at 14:35

$('#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(){};

score 0 · Answer 6 · answered May 03 '15 at 13:44

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.

Removed JavaScript is still executable

6 Answers6