Removing jQuery ajax-added js-files from document again?

Question

Hi

My site operates on an ajax "framework". Whenever a user opens a new page, that page loads in the necessary css and js files to view the page properly and adds them to the current document. The js files are loaded like this in jQuery:

function getJS(jsfiles) {
    $.each(jsfiles, function(i, val) {
        $.getScript(val);
    });
}

My problem is that whenever a js-file is loaded, that file is added to the document permanently and operates across all ajax "sub-sites". Therefore I get problems with reserved function names, functions that requires certain DOM-elements to be present when executed and throws an error otherwise, etc. etc. Is there a way to remove these files from the document again?

Answer 1

You can try to do something like this

$('head').empty();
$('head').append('<script src="yourscript.js" type="text/javascript" />');

Hope this helps

Answer 2

You could scope the contents of the JavaScript files you are loading, using a self-executing function. Or try assigning an ID to the script-blocks and remove them by doing: $("id of the script block").remove();.

Answer 3

I don't know how jQuery attaches new scripts, but you could do an AJAX request and build your own script elements in the callback, giving them a class that can be selected later for removal.

$.ajax({
    url:'test.js',
    dataType: 'text',
    success: function(script) {
        var head = document.getElementsByTagName('head')[0];
        var scr_elem = document.createElement('script');
        scr_elem.setAttribute("class","new_script");
        scr_elem.setAttribute("className","new_script");
        scr_elem.type="text/javascript";
        scr_elem.appendChild(document.createTextNode(script));
        head.appendChild(scr_elem);
    }
});

// Later on
$('.new_script').remove();

Note that I've only tested this in Webkit and Firefox.