In my project ,I have to load JS and CSS file dynamically after the page load. By using below code I am able to add and remove the js file But after adding the new file by removing the previous one,then the previous file is not shown in the header but when I run the code both js file code is executed.I don't known how to remove the file completely ,Can some body help me. For that the code is.
In the the view page header:-
<link rel="stylesheet" id="videoCss" />
<script id="videojs"></script>
Jquery for Dynamically load JS and CSS file:-
function addRemoveJsCssFile(filename, filetype)
{
var fileref='';
if (filetype == "js") { //if filename is a external JavaScript file
document.getElementById("videojs").remove();
fileref=document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", filename);
fileref.setAttribute("id", "videojs");
}
else if (filetype == "css") { //if filename is an external CSS file
document.getElementById("videoCss").remove();
fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
fileref.setAttribute("id", "videoCss");
}
if (typeof fileref != "undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
In this function we have to pass the file location and type of file i.e css or js to add file dynamically.Thank you.