Replace entire table row (including <tr></tr>) using JQuery

Question

I've looked at other examples here, but they seem to be replacing the contents of a <tr> and not the entire row including the <tr>.

<table>
    <tr style="display:block">
        <td id="someid">Test</td>
        <td>Some text</td>
    </tr>
</table>

The following code seems to only replace the innerHTML of the <tr>. I need to replace everything, including the <tr> so that the row will collapse. Can anyone confirm that this code does or does not completely replace the row:

var newtr = "<tr style='display:none'><td id='someid'></td><td></td></tr>"
$("td#someid").parent().html(newtr);

The reason why I don't think the entire <tr> is being replaced is because the row doesn't collapse - though I have tested the HTML outside of JQuery and it works fine.

Answer 1

You're almost there, just use the jQuery replaceWith^{[jQuery docs]} function:

$("td#someid").parent().replaceWith(newtr);

Answer 2

The proper function is .replaceWith:

$("td#someid").parent().replaceWith(newtr);

Answer 3

If you're trying to replace the object, not its contents:

$("td#someid").parent().replaceWith(newtr);

Answer 4

Use replaceWith method of jquery to replace the element.

$('#someid').parent().replaceWith(newtr);