delete all datatables using jQuery

[eyckzo]

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:\[code\]<table id="surnamePrimaryPartitionTable" border=1 class="display partitionDisplay"> <caption>Partitions</caption> <thead> <tr style="background-color: #afeeee;"> <th>Partition</th> <th>CPU %</th> <th>Search Count</th> <th>Person Count</th> <th>Disk Space</th> </tr> </thead> <tbody> </tbody></table>\[/code\]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).So, the problem arises when I try to destroy the datatables. Here is what I have:\[code\]function DeletePartitionInformation(data) { jQuery(".partitionDisplay").each(function(){ jQuery(this).dataTable().fnDestroy(); }); jQuery("table tbody").each(function() { jQuery(this).html(""); })}\[/code\]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:Uncaught TypeError: Cannot read property 'asSorting' of undefined 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:\[code\]<table id="surnamePrimarySubpartitionTable" border=1 class="display partitionDisplay"> <caption>SubPartitions</caption> <thead> <tr style="background-color: #afeeee;"> <th>Partition</th> <th>SubPartition</th> <th>CPU %</th> <th>Search Count</th> <th>Person Count</th> <th>Disk Space</th> <th>Begin</th> <th>End</th> </tr> </thead> <tbody> </tbody></table><table id="givenNullSurnamePartitionTable" border=1 class="display partitionDisplay"> <caption>Partitions</caption> <thead> <tr style="background-color: #98fb98;"> <th>Partition</th> <th>CPU %</th> <th>Search Count</th> <th>Person Count</th> <th>Disk Space</th> </tr> </thead> <tbody> </tbody></table><table id="givenNullSurnameSubpartitionTable" border=1 class="display partitionDisplay"> <caption>SubPartitions</caption> <thead> <tr style="background-color: #98fb98;"> <th>Partition</th> <th>SubPartition</th> <th>CPU %</th> <th>Search Count</th> <th>Person Count</th> <th>Disk Space</th> <th>Begin</th> <th>End</th> </tr> </thead> <tbody> </tbody></table>\[/code\]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.\[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\]