4

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.

Improve this question
12
  • What kind of code do you have there? Why do you want to get rid of it? Commented Feb 4, 2012 at 20:40
  • 2
    What are you trying to achieve with that? Commented Feb 4, 2012 at 20:40
  • what you are trying to achieve can only be made if you control the server side code that is serving the ajax contents. If not, there is no way to uninstantiate what is inside thouse javascript file unless you know exactly what are the names of every function inside them Commented Feb 4, 2012 at 20:43
  • @Sergio Tulentsev: Different. jQuery animations, regular JavaScript, just any. Commented Feb 4, 2012 at 20:44
  • @André Alçada Padez: I surely control server side code. Commented Feb 4, 2012 at 20:48

4 Answers 4

Reset to default
3

Despite i find this question really weird I will try no to go deeper and just anwser. Rewrite your imported scripts to something like that:

window.js7711 = function() {
// javascript and jquery stuff (lots)
}

Then when you load this awkward thing you should execute it js7711()

And on deletion I assume you do something like:

var myID = "js7711"

$("#" + myID).remove();

add this:

delete window[myID]

If you declare functions in this imported script you should think of adding an array with imported functions names js7711.imported = ["something", "trololo"] and then remove them in a loop.

Anyhow I think your approach/structure is kinda messed up.

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

4 Comments

This is a good one. I will use it if no one will offer a better solution. And it's bad to think that my approach/structure is a mess, you just don't know it. =)
I don't see how this would be helpful. If the OP wants to use anything that is inside window.js7711 from elsewhere, then it needs to get exported out of the function either by returning it or appending it to window. Either way, that leaked stuff will stick around after you delete window.js7711.
This will not work, since there might be stuff happening inside that function (e.g. event listeners that have been added to something) that will not be removed when only the 'main' function is removed.
If so, I guess this is not the solution I need.
3

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.

Improve this answer

1 Comment

So what does globalEval() change compared to a normal eval? Nothing for me. I am lazy-loading a javascript with AJAX. Using globalEval, I still have access to functions previously loaded the same way.
0

Are there any less coding solutions?

Nope.

You better think again if it's really the best approach, I mean get rid of javascript sctions...

Improve this answer

Comments

0

The problem indeed is that if you had bound any events to elements outside #js7711, these will still call, i.e. the javascript functions still work.

The solutions that comes to mind is to generate JS functions that check if their 'root' element (i.e. #js7711) still exists, and only execute if the element can still be found.

Then, if you would remove #js7711 the JS functions would stop working, probably what you want!

Improve this answer

3 Comments

Interesting one. But in this case I will need to run this "checkup" on every function. This does not look smart. =)
Just checked, this one is not gonna work, because new imported scripts (with AJAX) will contain same names for the functions. I actually need to remove function - LIKE IT NEVER EXISTED. =)
That's pretty much impossible, since, while you could define functions like (var x = function()) which would make it possible to overwrite them, within those functions there might be addEventListeners() that are bound to i.e. the document or any other element, and you would need to remove those as well, right? It would only work if you could call a remove function that would know about these eventListeners (or other actions) and would be able to remove them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.