Question

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

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.