Garrettj944 Garrettj944 - 1 year ago 62
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 Source

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