jQuery - dynamically remove head elements on click

Question

Does anyone know if you can remove head elements on a button click and how to do it with jQuery?

I am trying to get rid of certain script tags from the html head when a button is clicked. For instance. I have 1 screen view with a slideshow controlled by an external javascript file. When I click on a button "Click to get rid of this elements JS" I want to remove the external javascript path from the HTML Head.

Any ideas. Have been at this thing for a week or so.

Answer 1

I don't think its a good Idea to remove Entire HEAD Element. 'Cause your Page may contain some more Elements (i.e., title, style..) which are appended to Head Element. If you want to remove a particular script Element do something like

$(function() {
  $('input[type=button]').click(function() {
      $('script[src=path/file.js]').remove();
  });
});

Edit :

var flag = false;
function breakTheCode() {
    if(!flag) {
        //run your code
    }else return;
 }

$(function() {
  $('input[type=button]').click(function() {
      flag = true; //flag is set, so we no more using/ running your code
      breakTheCode(); //call you function/method
  });
});

Answer 2

You can do this sort of thing using javascript, sure, but before you do it, you might want to ask yourself again why. Here's a link describing how to do it in pure javascript with a jquery example provided by the other answerer:

http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

But try to keep in mind that most modern browsers will keep these external resources in memory for at least as long as the page is open. Therefore, you won't really be doing much.

Answer 3

You can add an id to a script element then remove that ID:

<script type="text/javascript" src="init.js" id="initJs" ></script>

<span id="removeScript"></span>

$('#removeScript').click(function() {
     $('#initJs').remove();
});