How to select elements in div that have no selectors

Question

I have a block of HTML that I can't access directly, but want to hide certain parts with CSS or Javascript. Below is what it looks like, and the sections I'm trying to hide:

<div id="container">
    <h3>Title here</h3>
    <table class="cool">
        <tr><td>hide this</td></tr>
        <tr><td>hide this</td></tr>
        <tr><td>dont hide this</td></tr>
        <tr><td>hide this</td></tr>
    </table>
    <h3>More nonsense</h3>
    <table class="cool">
        <tr><td>keep all of this</td></tr>
        <tr><td>keep all of this</td></tr>
    </table>
</div>
<hr>
<table class="cool">
    <tr><td>hide all of this</td></tr>
    <tr><td>hide all of this</td></tr>
</table>

Answer 1

This will do the exact layout shown in question. Any changes to numbers of rows or numbers of tables with same class might cause it to fail though

var $tables = $('table.cool');

$tables.eq(0).find('tr').not(':eq(2)').hide();
$tables.eq(2).children().hide();

or for last table hide whole thing

 $tables.eq(2).hide();

if you want to get rid of those rows completely substitute remove() for hide()

DEMO