20 August 2010

How to dynamycally remove an external Javascript or CSS file from a page

The key is to doing this is to traverse the DOM and then call the DOM's deleteChild() method.

We can identify the file to be deleted by using its filename or CSS class name. Here I am going to use its filename.

function deletejscssfile(filename, filetype){

var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from

var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for

var allsuspects=document.getElementsByTagName(targetelement)

for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to delete

if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)

allsuspects[i].parentNode.deleteChild(allsuspects[i]) //delete element by calling parentNode.deleteChild()

}

}

deletejscssfile("script_to_be_removed.js", "js") //delete all occurences of “script_to_be_removed.js” on page

deletejscssfile("script_to_be_removed.css", "css") //delete all occurences of “script_to_be_removed.css” on page

No comments:

Post a Comment