title: Clear the jquery dialog content on close
body: <p>When i click on a link in my page, i am opening a jquery dialog box (if it is not already open) and adding a jquery ui tab inside it. Followed example from <strong><a href="http://jsfiddle.net/AeXNP/30/" rel="nofollow">here</a></strong></p>
  
  <p>But when i close my jquery dialog and reopen it, the tabs which were opened previously are showing up. I would like to have no tabs inside the jquery dialog, when i close and reopen the dialog, so that i can add a new tab inside the dialog.</p>
  
  <p><strong>This is the code that is present in my jquery document ready:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var tab_counter = 1;
  
  $(document).ready(function() {
  var $tabs_example_1 = $('#example_1').tabs();
  
  $('#addUiTab').click(function(){
          var label = 'Tab'+tab_counter,
          content = '&lt;span id="tab"&gt;This is a sample tab content&lt;/span&gt;';
  
          $('body').append('&lt;div id="tab_'+tab_counter+'"&gt;'+content+'&lt;/div&gt;');
          $tabs_example_1.tabs('add','#tab_'+tab_counter,label);
          tab_counter++;
  
          return false;
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>This is my function that opens a dialog box (if it is not already open) and adds a tab inside it, when i click on a link in my page:</strong></p>
  
  <pre><code>function open_dialog()
  {
      if(($("#jdialog_box_content").dialog( "isOpen" ) === true) == false)
      {
          $('#jdialog_box_content').dialog({
          open: function(event, ui) {  },
          close: function(event, ui) {  },
          autoResize: false,
          width: 460,
          height: 230,
          closeOnEscape: false,
          title: 'Dialog1'
          });
      }
  
      $('#addUiTab').trigger("click");
  }
  </code></pre>
  
  <p><strong>And finally this is the html that is used for the jquery tabs, inside jquery dialog box:</strong></p>
  
  <pre><code>&lt;div id="jdialog_box_content" style="display:none;"&gt;    
      &lt;div id="example_1" class="tabs"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#tabs-1-2"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabs-2-2"&gt;This is tab 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabs-3-2"&gt;This is tab number 3&lt;/a&gt;&lt;/li&gt;           
          &lt;/ul&gt;
          &lt;div id="tabs-1-2"&gt;Tab 1&lt;br&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
          &lt;div id="tabs-2-2"&gt;This is tab 2&lt;br&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
          &lt;div id="tabs-3-2"&gt;This is tab 3&lt;br&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am just curious to know how can i remove the existing tabs in my jquery dialog box, when it is reopened.</p>
  
  <p><strong>Note:</strong> I am following the <a href="http://jquery.aamirafridi.com/jst/#examples" rel="nofollow">example at this site</a> for jquery ui tabs.</p>