Adding and removing tabs

Along with enabling and disabling tabs programmatically, we can also remove them or add completely new tabs on the fly. In tabs11.html, remove the existing <button> elements and add the following:

<label>Enter a tab to remove:</label>
<input for="indexNum" id="indexNum">
<button type="button" id="remove">Remove!</button>
<button type="button" id="add">Add a new tab!</button>

Then change the final <script> element as follows:

<script>
  $(document).ready(function($){
    $("#myTabs").tabs();
    $("#remove").click(function() {
      var indexTab = parseInt($("#indexNum").val(), 10);
      var tab = $("#myTabs").find(".ui-tabs-nav li:eq(" + indexTab + ")").remove();
      $("#myTabs").tabs("refresh");
    });
    $("#add").click(function() {
      $("<li><a href='remoteTab.txt'>New Tab</a></li>") .appendTo("#myTabs .ui-tabs-nav");
      $("#myTabs").tabs("refresh");
    });
  });
<...