title: delete all datatables using jQuery
body: <p>so, I am using datatables along with jQuery, and am a bit stumped as to why this is not working. My HTML looks like this:</p>
  
  <pre><code>&lt;table id="surnamePrimaryPartitionTable" border=1 class="display partitionDisplay"&gt;
    &lt;caption&gt;Partitions&lt;/caption&gt;
    &lt;thead&gt;
      &lt;tr style="background-color: #afeeee;"&gt;
        &lt;th&gt;Partition&lt;/th&gt;
        &lt;th&gt;CPU %&lt;/th&gt;
        &lt;th&gt;Search Count&lt;/th&gt;
        &lt;th&gt;Person Count&lt;/th&gt;
        &lt;th&gt;Disk Space&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I have several tables, each of which follows a similar format, and each of which uses the partitionDisplay class (really just a class that I use so that I can select all the tables later using jQuery).</p>
  
  <p>So, the problem arises when I try to destroy the datatables. Here is what I have:</p>
  
  <pre><code>function DeletePartitionInformation(data) {
    jQuery(".partitionDisplay").each(function(){
      jQuery(this).dataTable().fnDestroy();
    });
    jQuery("table tbody").each(function() {
      jQuery(this).html("");
    })
  }
  </code></pre>
  
  <p>This code seems to work correctly for the first table, but throws an exception and doesn't work on any subsequent tables. The javascript error message I am getting is the following:</p>
  
  <p>Uncaught TypeError: Cannot read property 'asSorting' of undefined </p>
  
  <p>A quick Google search on this error says that it generally arises from having  elements nested in a  tag. This does not appear to be the problem, however. I will post the code for the other three tables to demonstrate this:</p>
  
  <pre><code>&lt;table id="surnamePrimarySubpartitionTable" border=1 class="display partitionDisplay"&gt;
    &lt;caption&gt;SubPartitions&lt;/caption&gt;
    &lt;thead&gt;
      &lt;tr style="background-color: #afeeee;"&gt;
        &lt;th&gt;Partition&lt;/th&gt;
        &lt;th&gt;SubPartition&lt;/th&gt;
        &lt;th&gt;CPU %&lt;/th&gt;
        &lt;th&gt;Search Count&lt;/th&gt;
        &lt;th&gt;Person Count&lt;/th&gt;
        &lt;th&gt;Disk Space&lt;/th&gt;
        &lt;th&gt;Begin&lt;/th&gt;
        &lt;th&gt;End&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;table id="givenNullSurnamePartitionTable" border=1 class="display partitionDisplay"&gt;
    &lt;caption&gt;Partitions&lt;/caption&gt;
    &lt;thead&gt;
      &lt;tr style="background-color: #98fb98;"&gt;
        &lt;th&gt;Partition&lt;/th&gt;
        &lt;th&gt;CPU %&lt;/th&gt;
        &lt;th&gt;Search Count&lt;/th&gt;
        &lt;th&gt;Person Count&lt;/th&gt;
        &lt;th&gt;Disk Space&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;table id="givenNullSurnameSubpartitionTable" border=1 class="display partitionDisplay"&gt;
    &lt;caption&gt;SubPartitions&lt;/caption&gt;
    &lt;thead&gt;
      &lt;tr style="background-color: #98fb98;"&gt;
        &lt;th&gt;Partition&lt;/th&gt;
        &lt;th&gt;SubPartition&lt;/th&gt;
        &lt;th&gt;CPU %&lt;/th&gt;
        &lt;th&gt;Search Count&lt;/th&gt;
        &lt;th&gt;Person Count&lt;/th&gt;
        &lt;th&gt;Disk Space&lt;/th&gt;
        &lt;th&gt;Begin&lt;/th&gt;
        &lt;th&gt;End&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>One final note: I am actually able to get the behavior I want if I use the below code. Obviously I would prefer not to, however, since I'd really like to loop over the elements rather than hard-code the element id's in.</p>
  
  <pre><code>function DeletePartitionInformation(data) {
    jQuery("#surnamePrimarySubpartitionTable").dataTable().fnDestroy();
    jQuery("#surnamePrimaryPartitionTable").dataTable().fnDestroy();
    jQuery("#givenNullSurnameSubpartitionTable").dataTable().fnDestroy();
    jQuery("#givenNullSurnamePartitionTable").dataTable().fnDestroy();
  
    jQuery("table tbody").each(function() {
        jQuery(this).html("");
    })
  }
  </code></pre>