remove appended script javascript
Solution 1
I did some more tests, and before you'll get a correct answer to your question (hope there is a one) you can try this:
<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 a test code, but it contains an idea, how you possible could solve the problem. It removes <sript>
from the DOM, and the last line destroys all functionality of the script.
(The code also has a little detail, which shows, that setTimeout
will do eval()
, no matter how it is argumented...?)
Solution 2
Basically you can remove script tag by using a function similar to this one:
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, it use filename parameter to identify target script to remove. Also please note that target script could be already executed at the time you're trying to remove it.
Solution 3
I would simply check to see if you've already added the script. Adding it and then removing is adds unnecessary complexity. Something like this should work:
var scriptAdded = false;
if(scriptAdded == false) {
document.body.appendChild(script);
scriptAdded = true;
}
Solution 4
What you can do is remove the script immediately after it has been loaded:
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);
Anyway I think it is a better idea to append the script to the header (where all the other scripts reside) than to the body.
Solution 5
In case of JSONP and your use of jQuery, why not take full advantage of jQuery's JSONP loading facilities, which do the post-clean-up for you? Loading JSONP resource like this, doesn't leave a trace in the DOM:
$.ajax({ url: 'http://example.com/', dataType: 'jsonp' })
The <script>
tag used for loading is removed instantly as soon it's loaded. If the loading is a success. On the other hand, failed requests don't get cleared automatically and you have to do that yourself with something like this:
$('head script[src*="callback="]').remove();
called at the right time. It removes all pending JSONP <script>
tags.
Robin Carlo Catacutan
Likes: Lots of Coffee Mostly involve in: Javascript, Html, CSS, PHP, Python What I do now: Learning the beauty of Functional Programming(Clojure)
Updated on January 27, 2021Comments
-
Robin Carlo Catacutan over 3 years
how can I remove my appended script because it causes some problems in my app.
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 auto load function, that causes to create another element script.
I want to get rid of the previous element that was appended before another element is added.
-
Shashank Kadne about 12 yearsAs the OP says code refreshes every one minute, I believe the variable scriptAdded will be false everytime.
-
Jim Blackler about 12 yearsMaybe the script added by OP is a JSONP call?
-
James Hill about 12 years@ShashankKadne, that part confused me a bit as well. I assumed that it was some type of AJAX refresh since the OP also indicated that they are getting 30 instances of the script added (one per refresh). Unless they post more code, I'm sticking to my original answer :)
-
Robin Carlo Catacutan about 12 yearsYes, its a JSONP call. I think this does not solve my problem.
-
Robin Carlo Catacutan about 12 yearsThanks. But I have to stick to my classic script, since I have too many of these and the deadline is near. Well I gonna put this on my mind for the future needs. Thanks for stating this to me, really helpful.
-
Petr Vostrel about 12 yearsUnderstood. Still think you can use the removal line to get rid of your previous
<script>
if you target it to locate "notify.js" in the src like this:$('head script[src*="notify.js"]').remove();
-
Robin Carlo Catacutan about 12 yearsThe script is still in the memory. Still functioning.
-
Teemu about 12 years@Robin Carlo Catacutan Thanks for accepting. I suppose you have noticed, that if you define global variables in closures, they will remain despite of nullifying closured function. And
setInterval
s will continue for ever... -
Pavel Podlipensky about 12 yearsAs I mentioned in my post - this is expected behavior in case when you're trying to remove it after it was executed. You need to stop it by using javascript and then remove then.
-
Robin Carlo Catacutan about 12 yearsYes, you're right. What I've searched so far is that, it is called as memory leaks.
-
Steven about 10 yearsSolved ma problem! Thanks