Question

In less words:

I have multiple JavaScript sections located at different places in document. Some of them are loaded and evaluated with AJAX:

<script id="js5533" type="text/javascript">
  javascript and jquery stuff (lots)
</script>
<script id="js7711" type="text/javascript">
  javascript and jquery stuff (lots)
</script>

As you can see I ID every section.

My goal is to get rid of specific section by clicking on button.

$('.somebutton').click(function() {
  $('#js7711').remove();
});

Of course this function removes only element from the document and all JavaScript functions in section js7711 are still working.

I don’t want to manually remove every function and variable from the section by doing things like a(); a = 0;

Are there any less coding solutions?

Thanks.

P.S. jQuery is also used.

Answer 1

Found a lazy workaround for this.

First of all: reason for getting rid of previous JS code is – to run a new code (similar or same with the old one) without reloading page.

The solution is:
To forget about previously loaded code and execute your new code with jQuery.globalEval(js); where js is a var containing your actual new JS code.

jQuery just creates another sequence with your new code which does not interfere with the old one excluding live events (solved with event.stopPropagation())

Works for me perfectly.

Like someone said: you cannot make a browser forget about the JS which was already executed.