Delete added javascript script

Question

how to remove my added script because it causes some problems in my application.

This is my code to get my script

var nowDate = new Date().getTime(); var url = val.redirect_uri + "notify.js?nocache=" + nowDate + "&callback=dummy"; var script = document.createElement('script'); script.src = url; document.body.appendChild(script); 

Then I have an automatic loading function that calls the creation of another script element.

I want to get rid of the previous element that was added before adding another element.

Answer 1

I did some more tests, and before you get the correct answer to your question (I hope there is one), you can try the following:

 <button onclick="foo()">ShowHTML</button> <script> (function foo(){ var b=function moo(){ var c=document.getElementsByTagName('script'); alert(document.body.innerHTML); c[0].parentElement.removeChild(c[0]); alert(document.body.innerHTML); } var a=setTimeout(b,1000); b=null; })(); foo=null; </script> 

This is just test code, but it contains an idea of ​​how you could solve this problem. It removes the <sript> from the DOM, and the last line destroys all the script functions.

(The code also has a small detail that shows that setTimeout will do eval() , no matter how it is argued ...?)

Answer 2

I would just check if you added a script. Adding it and then removing it adds unnecessary complexity. Something like this should work:

 var scriptAdded = false; if(scriptAdded == false) { document.body.appendChild(script); scriptAdded = true; } 

Answer 3

Basically, you can remove the script tag with a function similar to this:

 function removeJS(filename){ var tags = document.getElementsByTagName('script'); for (var i = tags.length; i >= 0; i--){ //search backwards within nodelist for matching elements to remove if (tags[i] && tags[i].getAttribute('src') != null && tags[i].getAttribute('src').indexOf(filename) != -1) tags[i].parentNode.removeChild(tags[i]); //remove element by calling parentNode.removeChild() } } 

Note that it uses the file name parameter to identify the target script to delete. Also note that the target script may be executed while you are trying to delete it.

Answer 4

What you can do is remove the script immediately after loading it:

 var nowDate = new Date().getTime(); var url = val.redirect_uri + "notify.js?nocache=" + nowDate + "&callback=dummy"; var script = document.createElement('script'); script.src = url; script.onload = function( evt ) { document.body.removeChild ( this ); } document.body.appendChild(script); 

In any case, I think it's better to attach the script to the header (where all the other scripts are located) than to the body.

Answer 5

In the case of JSONP and using jQuery, why not take full advantage of the jQuery JSONP boot devices that run after cleaning? Loading a JSONP resource like this leaves no trace in the DOM:

 $.ajax({ url: 'http://example.com/', dataType: 'jsonp' }) 

The <script> used for loading is immediately deleted as soon as it is loaded. If the download is successful. On the other hand, failed requests are not cleared automatically, and you must do it yourself with something like this:

 $('head script[src*="callback="]').remove(); 

at the right time. It removes all pending JSONP <script> tags.

Answer 6

Well,
I have the same need due to ajax calls raised by an event. Some calls, which may be early, may return later, and then overwrite the document filled with the last call.

removeChild(scriptEl) does not work. Changing the src attribute also does not work.

If jsonp is your only option, and if you have control over the server’s response, you can allow those who are added to distinguish between the return on the callback.

Just pass the timestamp parameter, then check it on the callback

 //callback function dummy(res, ts) { if(YAHOO.util.Selector.query('script[id='scriptIdPrefix+ts+']').length>0) { do your job } else { do nothing } } //add script var scriptIdPrefix='myScriptId'; function ajaxCall() { var timestamp = new Date().getTime(); var scriptId = scriptIdPrefix+timestamp; //remove the previous script el s=YAHOO.util.Selector.query('script[id^='+scriptIdPrefix+']'); if(s.length>0) { document.body.removeChild(s[0]); } var script = document.createElement('SCRIPT'); script.id = scriptId; script.type = 'text/javascript'; script.src = 'http://server/notify.js&callback=dummy&ts='+timestamp; document.body.appendChild(script); } 

Collect the result of the notify.js server accordingly:

 dummy([{"datax":"x","datay":"y"}], 1369838562792) 

This way, you will only have one script element like this with a parametric id

 <script id="myScriptId1369838562792" type="text/javascript" src="http://server/notify.js?callback=dummy&ts=1369838562792"></script> 

Answer 7

 var flag1=0,flag2=0; $(window).resize(function(){ if ($(window).width() < 480){ flag1++; console.log(flag1); flag2=0; } else if($(window).width() > 480){ flag2++; console.log(flag2); flag1=0; } if(flag1==1){ $("body").append("<script class='abc' src='custom.js'/>"); } else if(flag2==1){ $(".abc").remove(); } });