Garrettj944 Garrettj944 - 6 months ago 8
jQuery Question

How to select elements in div that have no selectors

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

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