Is there any direct way to get a minimal HTML node structure in jQuery?

Question

This is the input node structure

<table>
    <thead>
        <tr style="text-align: left;">
            <th class="some_class"><div><div><span>COL1</span></div></div></th>
            <th class="some_class"><div><div><span>COL2</span></div></div></th>
            <th class="some_class"><div><div><span>COL3</span></div></div></th>
            <th class="some_class"><div><div><span>COL4</span></div></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>content 1</th>
            <td>content 2</td>
            <td>content 3</td>
            <td>content 4</td>
        </tr>
    </tbody>
</table>

And this is the wanted output structure

<table>
    <thead>
        <tr>
            <th>COL1</th>
            <th>COL2</th>
            <th>COL3</th>
            <th>COL4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>content 1</th>
            <td>content 2</td>
            <td>content 3</td>
            <td>content 4</td>
        </tr>
    </tbody>
</table>

I could just remove the elements manually with some mappings or some loops, but I am wondering if there is a better way to just get the minimal HTML possible without attributes

Answer 1

Removing the attributes you can use the removeAttr,.

To get rid of <div><div><span>...,. You could loop the th get the text() and then set using text() again this has the effect of getting rid of the the extra tags.

eg..

const c = $('table').clone();

c.find('*').removeAttr('class style');
c.find('th').each(function() { $(this).text($(this).text()); }); 

console.log(c[0].outerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr style="text-align: left;">
            <th class="some_class"><div><div><span>COL1</span></div></div></th>
            <th class="some_class"><div><div><span>COL2</span></div></div></th>
            <th class="some_class"><div><div><span>COL3</span></div></div></th>
            <th class="some_class"><div><div><span>COL4</span></div></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>content 1</td>
            <td>content 2</td>
            <td>content 3</td>
            <td>content 4</td>
        </tr>
    </tbody>
</table>