CODEWITHSUNDEEP
javascriptjqueryhtml
Ajax1234
Ajax1234

Reputation: 71451

Issue When Dynamically Removing Script Tags With Jquery

I have created two short javascript files, each containing a $(document).ready function that has javascript to detect a button click from the html file that has included it. My main html file has the script tags pointing to each file in the header:

file1.js:

$(document).ready(function(){
  $('.wrapper').on('click', '.click_1', function(){
    alert('hello from the first file');
  });
});

file2.js:

$(document).ready(function(){
  $('.wrapper').on('click', '.click_2', function(){
   alert('hello from the second file');
  });
});

My goal, however, is to be able to dynamically remove one of the script tags (the javascript from the second file) from the header, and its functionality along with it. To do so, I created a script in my main html file to remove the target script tag via the src attribute. However, while an inspection of the page source reveals that the third script tag has indeed been removed, its functionality remains. For instance, even after clicking the .remove_2 button, I can still click the .click_2 button and receive the "hello from the second file" alert:

main.html:

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
  </head>
   <body>
     <div class="wrapper">
         <button class='click_1'>File1</button>
         <button class='click_2'>File2</button>
         <button class='remove_2'>Remove File2</button>
     </div>
   </body>
   <script>
    $(document).ready(function(){
     $('.wrapper').on('click', '.remove_2', function(){
       $('script[src="file2.js"]').remove();
     });
   });
   </script>
 </html>

In short, I wish to be able to dynamically remove a script tag so that the javascript in the file that the tag points to no longer has any affect on the html page. However, I have not been able to accomplish this. Can anyone tell me what is wrong with my code? Also, is what I am trying to accomplish even possible? Thank you.

Upvotes: 1

Views: 822

Answers (2)

gaetanoM
gaetanoM

Reputation: 42044

Removing an external script does not remove event handlers. They are attached to current document.

A solution can be:

  1. remove the script
  2. get all html page

  3. replace html page with new content

    $('.wrapper').on('click', '.remove_2', function(){
    $('script[src="file2.js"]').remove();
    var html = document.documentElement.innerHTML;
    document.open('text/html');
    document.write(html);
    document.close();
});

In jQuery, replacing only the header after removing the script:

$('.wrapper').on('click', '.remove_2', function(){
    var header = $('html head');
    header.find('script[src="file2.js"]').remove();
    $('html head').replaceWith(header);
});

Upvotes: 2

Morris
Morris

Reputation: 320

Try unbinding the click event from the second button before removing it:

$('.click_2').unbind("click");

Although unbind is now deprecated. The newer form is 'off':

$('.click_2').off( "click", "**" );

http://api.jquery.com/off/

That said, you do seem to be using a rather peculiar approach to disable click functionality.

Upvotes: 1

Related Questions