Question

I’m trying to remove a few rows surrounded by a div, but it doesn’t work, why?

$(function(){
  $("#div1").empty();
});


           <table id="tbl" border="1px">
                <thead>
                   ...
                </thead>
                <tbody id="tblBody">
                    <div id="div1">
                        <tr id="tr1">
                            <td>
                                row1
                            </td>
                        </tr>
                        <tr>
                            <td>
                                row2
                            </td>
                        </tr>
                    </div>
                </tbody>
            </table>

Answer 1

Because there is no such thing as rows surrounded by a <div>. It is invalid to put a <div> inside a <tbody>, so the browser tries to ‘fix’ your mistake by kicking the <div> out of the table, putting it somewhere else in the document tree you didn’t expect it to be, and making sure it does not contain any <tr>​s. So when you empty it, it has no contents to lose.

This is what multiple <tbody>​s are for.