Question

I need to find if a div element that is populated with a lot of tables from an system i don’t have control over is empty. And by empty I mean if the tables inside the div don’t any content inside.

This is the stripped down markup that the system generates:

<div class="shadowBox">
    <table>
        <tbody>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

In some situations the second (most inner) table has content inside, and in some situations it doesn’t. I want to hide the div if there is no content inside the second table. I can achieve this by going trough the structure and checking for the html of the td:

$.trim($(".shadowBox table tbody tr td table tbody tr td").html())==""

Is there any simpler way of doing this?

Answer 1

You could use text()

$.trim($(".shadowBox").text())===""

which:

Get the combined text contents of each element in the set of matched
elements, including their descendants.

If that is empty, hide it

if($.trim($(".shadowBox").text())===""){
     $(".shadowBox").hide();
}