How can I remove a some javascript from my webpage?
Question
With jquery.load() I'm loading some html into my page from a file which also contains javascript functions.
later I try to remove the html and the javascript using jquery.empty but it seems once the script is parsed by the browser I can't get rid of it, so I'm looking for suggestions on how to do this.
Below is the test source:
index.html
<head>
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script>
$(function(){
$('#loadEmbScrpt').click(function(){
$('#embDiv').load('http://maccyd10.hostoi.com/test.html');
});
$('#remEmbScrpt').click(function(){
$('#embDiv').empty();
});
});
<body>
<div id="embDiv"></div>
<div id="output"></div>
<input type="button" id="loadEmbScrpt" value="embed script into page"/>
<input type="button" id="remEmbScrpt" value="remove embedded script from page"/>
<input type="button" id="testButton" value="run embedded script test function"/>
</body>
test.html
<script>
$('#testButton').on('click',function(){
$('#output').append("<p>test</p>");
});
</script>
And here is a link to the above in action (I could not post this to jsfiddle due to XSS protection).
2 answers
solution1
2 2013-09-06 23:42:13
As has been mentioned in the comments, you can't get rid of javascript once it has been loaded.
With that being said, if you wish to undo the changes made by the script you posted above, the .off() function will unbind all attached to a handler (so if any other events are attached to click, they will be removed to).
eg the following will unbind the functions from the click events on $('#loadEmbScrpt') and $('#remEmbScrpt') :
$('#loadEmbScrpt').off('click');
$('#remEmbScrpt').off('click');
or if you want it all in one line:
$('#loadEmbScrpt,#remEmbScrpt').off('click');
Let me know if that solves your problem
solution2
2 ACCPTED 2013-09-07 01:03:58
Have a play with this http://jsfiddle.net/6eWRQ/
As others have alluded to, the DOM and the Javascript VM are two separate systems within the browser.
The DOM is the browser's internal model of the HTML document to be rendered. It deals with HTML elements such as <script> and their position within the HTML document.
The Javascript VM deals with javascript code - it deals with running any Javascript code within <script> tags or pulled in from external js files.
it seems once the script is parsed by the browser I can't get rid of it
You can of course remove the <script> element from the DOM - but after the browser has parsed it this will have zero effect on the javascript VM - because then the javascript code inside the tag it has already been consumed and executed by the VM. Once the code has run, it cannot be un-run.
In the case of the example jsfiddle this is even clearer - removing a <script> element containing a function doesn't mean you can't call that function any more, once the code inside the <script> has already been executed by the VM. The VM has its own internal model of the function and changes to the original code in the DOM after it has been executed are simply irrelevant to it.
Removing the containing <script> element from the DOM using javascript is effectively pointless in this situation - it's just redundant. The DOM rendering engine has no use for it because it's not a visual element, and the javascript VM has no use for it because it's already-processed input.
To do what you want you should remove the #remEmbScrpt button, and instead use the following to undo the binding performed by the loaded script:
$('#testButton').off('click');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.