Remove specific <script> tag in <head> tag by onclick event

Question

<head>

    <script type="text/javascript">

        function include(filename, status){
            if(status == 'on'){
                var head = document.getElementsByTagName('head')[0];

                script = document.createElement('script');
                script.src = filename;
                script.type = "text/javascript";

                head.appendChild(script);
            } else {
               // The code that wipes the script tag above
            }
        }

    </script>

</head>

<body>
    <input type="button" value="OPEN" onclick="include('script.js', 'on')">
    <input type="button" value="CLOSE" onclick="include('', 'off')">
</body>

I want to remove the specific tag in tag by onclick event. What code should be written in the ELSE area, When I click the "CLOSE" botton?

Why do you want to remove script tag? In general, the javascript is read and digest by javascript engine on loading the script file, result even you remove that script tag from DOM later(in any event) will not remove the execution flow presented in removed script tag. — HILARUDEEN S ALLAUDEEN
– HILARUDEEN S ALLAUDEEN, Commented Feb 5, 2013 at 13:10
head.removeChild(document.getElementById('script_id'));, though it is not very useful, the script itself remains in the memory, despite of removing the element from the DOM. — Teemu
– Teemu, Commented Feb 5, 2013 at 13:10
Were you able to solve this problems using the posted solutions below, if so please accept the correct answer for the benefit of everybody in the SO community. — neelmeg
– neelmeg, Commented Jun 1, 2013 at 3:07

Sirko · Accepted Answer · 2013-02-05 13:48:09Z

32

The easiest way, would be to somehow maintain a link to the created element. For example, you could put the include function into a closure and have a private variable, to hold the reference:

var include = (function(){
   // the reference to the script
   var theScript;

   return function (filename, status){
     if(status == 'on'){
       // adding a script tag
       var head = document.getElementsByTagName('head')[0];

       theScript= document.createElement('script');
       theScript.src = filename;
       theScript.type = "text/javascript";

       head.appendChild( theScript )
     }else{
       // removing it again
       theScript.parentNode.removeChild( theScript );
     }
   }
})();

One important note: By removing the <script> tag, you do not remove any of its objects, functions etc. from the DOM. So any action started within that <script> tag will prevail, even if you delete the element, that started it in the first place!

edited Feb 5, 2013 at 13:48

answered Feb 5, 2013 at 13:09

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

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

3 Comments

VisioN Over a year ago

Put on in quotes, otherwise it will raise exception.

neelmeg Over a year ago

Tried this code, seems to be working perfectly fine for me, but wondering why OP has not accepted it as the correct answer.

Flamur Beqiraj Over a year ago

any solution to remove the script tag from dom, because i am using ajax to append data, they dont work without the scripts so in the fetch file i just added the scripts but by fetching the data, the script tag is multiply added and in one click it calls x times same function, if anyone can help me here out it would be gorgious: stackoverflow.com/questions/51638466/…

Mx. · Accepted Answer · 2013-02-05 13:53:00Z

12

You could also add an ID to the ScriptElement

this will work for you

function include(filename, status){
  if(status == "on"){
     var head = document.getElementsByTagName('head')[0];

     script = document.createElement('script');
     script.src = filename;
     script.type = "text/javascript";
     script.id = "testScriptName";

     head.appendChild(script);
  }else{
    (elem=document.getElementById("testScriptName")).parentNode.removeChild(elem)
  }
}

answered Feb 5, 2013 at 13:53

Mx.

3,6832 gold badges27 silver badges33 bronze badges

Comments

sohel khalifa · Accepted Answer · 2013-02-05 13:11:38Z

2

Try using this:

function include(filename, status){
  var head = document.getElementsByTagName('head')[0];
  if(status == on){
     script = document.createElement('script');
     script.src = filename;
     script.type = text/javascript;
     head.appendChild(script)
  }
  else if(status == 'off'){
     var scripts = head.getElementsByTagName('script');
     if(scripts.length > 0){
        head.removeChild(scripts[0]);
     }
  }
}

answered Feb 5, 2013 at 13:11

sohel khalifa

5,5863 gold badges36 silver badges46 bronze badges

Collectives™ on Stack Overflow

Remove specific <script> tag in <head> tag by onclick event

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related