title: Remove tables from HTML using jQuery
body: <p>I've got many chunks of HTML coming into my app which I have no control over. They contain tables for layout, which I want to get rid of. They can be complex and nested. </p>
  
  <p>What I want is to basically extract the HTML content from the tables, so that I can inject that into other templates in the app.</p>
  
  <p>I can use jQuery or plain JS only, no server side trickery.</p>
  
  <p>Does anyone know of a jQuery plugin of good tip that will do the job?</p>
  
  <p>Littm - I mean to extract content from the td tags essentially. I want no trace of table left in the code when it's done. Thanks!</p>
  
  <p>Here's an example of the type of HTML in question. It all comes in via XHR from some ancient application so I have no control over the markup. What I want is to get rid of the tables completely, leaving just the rest of the HTML or other text content.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;&lt;td colspan="4"&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="1%"&gt;&lt;/td&gt;
          &lt;td width="40%" style="padding-left: 15px"&gt;
          &lt;p&gt;Your access level:  &lt;span&gt;Total&lt;/span&gt;&lt;/p&gt;
          &lt;/td&gt;
          &lt;td width="5%"&gt;
              &lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;b&gt;Please note&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
          &lt;/td&gt;
          &lt;td width="45%" style="padding-left: 6px" valign="top"&gt;&lt;p&gt;your account&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;&lt;td colspan="4"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;
          &lt;td width="1%"&gt;&lt;/td&gt;
          &lt;td width="40%" style="padding-left: 15px"&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td align="right"&gt;Sort Code:  &lt;/td&gt;
                      &lt;td align="center"&gt;&lt;strong&gt;22-98-21&lt;/strong&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="right"&gt;Account Number:  &lt;/td&gt;
                      &lt;td&gt;&lt;strong&gt;1234959&lt;/strong&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
          &lt;td width="5%"&gt;&lt;/td&gt;
          &lt;td width="45%" style="padding-left: 6px"&gt;Your account details for&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I've tried;</p>
  
  <pre><code>var data = ""
  $("td").each(function(){
    data += $(this).html()
  });
  $("article").append(data);
  $("table").remove();
  </code></pre>
  
  <p>But var <code>data</code> still contains nested td tags. I'm no JS expert so I'm not sure what else to try....</p>