How to remove specific <script> on click

Question

I have a number of tags on my page.

<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript" src="script3.js"></script>
<script type="text/javascript" src="script4.js"></script>
<script type="text/javascript" src="script5.js"></script>
<script type="text/javascript" src="toRemove.js"></script>

I've tried:

html.replace(/<script type="text/javascript" src="toRemove.js">.*<\/script>/ims, " ");

Scripts can't be removed from the page. You can remove a script element, but the program remains. — Teemu
– Teemu, Commented Oct 30, 2014 at 11:48
You need to escape the slash: /<script type="text\/javascript.../ — Mr. Polywhirl
– Mr. Polywhirl, Commented Oct 30, 2014 at 11:49
@A1rPun - this script is very heavy on page load, so when i open a new window (which is a copy of the current) it carrys out extra processes and there is no need for this tag. — Oam Psy
– Oam Psy, Commented Oct 30, 2014 at 11:50
You could load your page without the scripts , and then add only the necessary scripts one by one with something like (function() { var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.src = 'foo.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sc, s); })(); — Sly
– Sly, Commented Oct 30, 2014 at 11:56

jAndy · Accepted Answer · 2014-10-30 11:54:06Z

1

As other people already stated, you cannot "unload" a script by removing its node. However, technically you can of course remove the script node. I would not recommend using a RegEx on the documents HTML string, but rather

[].forEach.call(document.head.getElementsByTagName('script'), function( scr ) {
  if( scr.getAttribute( 'src' ) === 'toRemove.js' ) {
      scr.parentNode.removeChild( scr );
  }
});

Ideally, you're not working in your life document there, but rather create a clone via createDocumentFragment for instance, which you can then re-use for whatever reason.

answered Oct 30, 2014 at 11:54

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Teemu Over a year ago

Why not to use scripts collection, OP didn't say if these scripts are within head or body.

Yury Tarabanko Over a year ago

Why not document.querySelectorAll('script[src=toRemove.js]')? Should work even for IE8.

jAndy Over a year ago

Y U NO ! Well, this is just an example, of course you can use other query methods.

Oam Psy Over a year ago

@YuryTarabanko - IE8 support is a must :(

Yury Tarabanko Over a year ago

@OamPsy Well, querySelectorAll is not your problem :). Array.prototype.forEach is. :)

Shoaib Chikate · Accepted Answer · 2014-10-30 12:05:56Z

1

You can try querySelectorAll which will fetch script tag from body as well as head.

var scriptTagElements=document.querySelectorAll('script[src=toRemove.js]')

for(var i=0;i<scriptTagElements;i++){

    scriptTagElements[i].parentNode.removeChild(scriptTagElements[i]);

}

answered Oct 30, 2014 at 12:05

Shoaib Chikate

8,97112 gold badges50 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to remove specific <script> on click

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related