Destroying tabs

As shown earlier, we can easily add tabs but there may be occasions when you need to completely destroy a set of tabs. This is possible using the destroy method, which is common to all the widgets found in jQuery UI. Let's see how it works. In tabs13.html, remove the existing markup immediately after the existing <br>, and add a new <button> as follows:

<br>
<button type="button" id="destroy">Destroy the tabs</button>

Next, change the final <script> element to this:

<script>
  $(document).ready(function($){
    $("#myTabs").tabs();
    $("#destroy").click(function() {
      $("#myTabs").tabs("destroy");
    });
  });
</script> 

Save this file as tabs14.html. The destroy method, which that we invoke with a click on the button, completely removes the Tabs widget, returning the underlying HTML to its original state. After the button has been clicked, you should see a standard HTML list element and the text from each tab, similar...