Question

I have a table and I wish to extract the html from a specific row without a specific class.

So for example with the row:

<tr>
<th class='a'></th>
<th class='b'></th>
<th class='c'></th>
<tr>

I would hope to get a result like

<th class='b'></th>
<th class='c'></th>

I’ve attempted a few variants of

var newTr = $('#table01 tr:nth-child(2) .a').remove().html();

But it’s not returning the desired result and it’s removing the th’s from the original rows(as expected I guess)

Would it be best to use a regex to strip the content out or is there a jQuery selector I can use?

Answer 1

If you’re wanting the HTML of the row, you need to point jQuery to the <tr> for .html() while .remove() would still need it to point to the <th>.

However, after .remove(), you won’t be able to simply traverse from <th> to <tr> as they won’t be related (e.g., via .parent()). To get around this, you can use a series of .find() and .end() to point to the <th> just long enough for .remove:

$('#table01 tr:nth-child(2)').
    find('.a').remove().end().
    html();

• jQuery begins with the <tr> w/ :nth-child(2)
• .find() will move to the <th class="a">, which you .remove()
• .end() will return to the <tr>, to grab the remaining .html()

Also, if you don’t actually want to affect the table — just the result — toss in a .clone():

$('#table01 tr:nth-child(2)').clone().
    find('.a').remove().end().
    html();