Replacing a table row with a new one, the new one has no parentElement (IE8)

[cradle22@…]

I dynamicall replace a table row inside a tbody element with a new table row.

After I select that row (via its id), both the DOM element and the jQUery Object do not have the tbody as the parentElement.

The error happens on IE8 (which I am force to use, corporate project)

Abbreviated code (assuming the following table structure)

<table>
  <tbody>
    <tr id="POS_32"><td>Bla</td></tr>
    <tr id="POS_33"><td>Bla2</td></tr>
    <tr id="POS_34"><td>Bla3</td></tr>
  </tbody>
</table>

JavaScript:

var $row = $("#POS_33");
var test = "<tr id='POS_33'><td>Some new content</td></tr>";
$row.replaceWith(test);

// re-select the row (could have done that the step before, does not change the effect)
$row = $("#POS_33");

// now $row.length == 1
var tr = $row[0];

// now tr ist the new DOM element

if(tr.parentElement == null) {
  alert("Error");
  // There is no parent element
}
if($row.closest("tbody").length == 0) {
  alert("Error2");
  // tbody cannot be found
}

[sindresorhus]

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate:  http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!