title: How to stop and fully remove any executing javascript from a section of page?
body: <p>I have a page structure as following:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
  
          &lt;span&gt;
              &lt;img src="public/demo.png" /&gt;
          &lt;/span&gt;
  
          &lt;span id="removeWithin"&gt;
  
              &lt;table cellspacing="0" cellpadding="0"&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Demo Demo&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Demo Demo&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
              &lt;script type="text/javascript"&gt;
  
              // there is some javascript logic in here...
  
              &lt;/script&gt;
  
          &lt;/span&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On a button click I would like to fully remove and stop from executing all of the children within the span tag "removeWithin" (remove all of the HTML code + stop and remove all of the JavaScript code). I would like the page to be as such after removal:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
  
          &lt;span&gt;
              &lt;img src="public/demo.png" /&gt;
          &lt;/span&gt;
  
          &lt;span id="removeWithin"&gt;
  
          &lt;/span&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I do this?</p>
  
  <p>If I use jQuery's empty() will it automatically stop all of the JavaScript code within the span tag from executing?</p>
  
  <pre><code>$("#removeWithin").empty();
  </code></pre>