Question

I’m not using jQuery.
I want to remove all table tags (table,td,tr,etc.) and their respective closing tags, while keeping the content. I can’t edit the code that creates this HTML. It generates something like this:

<table>
    <tbody>
       <tr>
           <td>
              <div>
                 <a></a>
              </div>
           </td>
       </tr>
    </tbody>
</table>

I want to remove all the junk so it just ends up like this:

<div>
     <a></a>
</div>

I’ve searched for a while and I can’t find anything like it.

Answer 1

Assuming you are working on the DOM (client side) and have a reference to the table:

// table references the table DOM element
var keep = document.createDocumentFragment(),
    tds = table.getElementsByTagName('td'),
    td, i, l;

// extract the content of each cell
for (i = 0, l = tds.length; i < l; i++) {
    td = tds[i];
    while(td.firstChild) {
         keep.appendChild(td.firstChild);
    }
}

// insert the content before the table (or where ever you want)
table.parentNode.insertBefore(keep, table);
// remove the table
table.parentNode.removeChild(table);

DEMO

This iterates over all cells and appends each child node to a DocumentFragment ^[MDN]. By doing this, the child node (the content we want to keep) is removed from the table. Then all of them are inserted before the table and the table is removed.

---

If you have the HTML as string, you can generate the DOM by creating a dummy element:

var dummy = document.createElement('div');
dummy.innerHTML = html;

var table = dummy.getElementsByTagName('table')[0];
// or table = dummy.children[0];

If this is not what you want, you have to provide more information.