title: Remove script tag from html and from the DOM with JS
body: <p>How to remove a js script from the html and from the DOM?</p>
  
  <p>To exemplify, in my html i have a div with a button:</p>
  
  <pre><code>&lt;div class="tester"&gt;
  
      &lt;button id="myBtn"&gt;Click me!&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And it has also this script <code>&lt;script src="js/debug.js" id="debug_js"&gt;&lt;/script&gt;</code></p>
  
  <p>The code of <code>debug.js</code> :</p>
  
  <pre><code>window.addEventListener("DOMContentLoaded", initApp1);
  
  
  function initApp1()
  {
  
      console.log("Init App!! ");
  
      var myBtn = document.getElementById("myBtn");
      var script = document.getElementById("debug_js");
  
      myBtn.addEventListener("click", function(){
  
          alert("clicked!");
  
          $( script ).remove();
  
      });
  
  } //    initApp1
  </code></pre>
  
  <p>When i do the first click, it removes the script from the html. Ok.
  When i click again i expect this behaviour:
  DOn't make the alert "clicked!" (actually Do nothing).</p>
  
  <p>The behaviour that i'm having:
  It throws the alert "clicked!" again (every time the btn is clicked)</p>
  
  <p>After some search i found that:
  "<strong>By removing the  tag, you do not remove any of its objects, functions etc. from the DOM. So any action started within that  tag will prevail, even if you delete the element, that started it in the first place!</strong>"</p>
  
  <p><strong>So how can i remove it also from the DOM ?</strong> (or other suggestions)</p>