CODEWITHSUNDEEP
jqueryjquery-selectors
gordon613
gordon613

Reputation: 2952

Accessing a nested div using jquery

I define a tabs using JQuery

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
  </ul>

  <div id="tabs-1">
    <table>
      <tr><td>demo</td></tr>
    </table>        
  </div>
  <div id="tabs-2">
    <table>
      <tr><td>demo</td></tr>
      <div id="hello">
        <tr><td>Hello World</td></tr>
      </div>
    </table> 
  </div>

I can hide tabs-1 with the simple code

function hideTabs1() {
   $("#tabs-1").hide(); 
}

How can I hide just the words "Hello World"?

Upvotes: 1

Views: 3411

Answers (5)

gordon613
gordon613

Reputation: 2952

The solution for me is a combination of a few people's answers. (I am not sure what SO protocol is for this, so I answered my own question, and marked-up all the other answers)

Once I realized that a DIV can not be a child of a TABLE (thank you bfavaretto and Sirko) then I realized I could divide the table into two tables, and give the table I wanted to hide an ID (using Ruben's and Ryan's idea for a td) and then just hide this table.

Thank you everybody.

Upvotes: 0

Ryan
Ryan

Reputation: 1395

You should really fix the HTML to something like this so that it's valid:

...
<div id="tabs-2">
   <table>
      <tr><td>demo</td></tr>
      <tr id="hello"><td>
         Hello World
      </td></tr>
   </table> 
</div>
...

Then your would be jQuery:

$("#hello td").hide();

Upvotes: 1

mgraph
mgraph

Reputation: 15338

try this one :

$("#hello td").hide();

or better : 

$("#tabs-2 td:eq(1)").hide();

Upvotes: 2

Ruben
Ruben

Reputation: 9186

try this:

$('#hello').css('display', 'none');


<div id="tabs-2">
    <table>
      <tr><td>demo</td></tr>
       <tr  id="hello"><td>Hello World</td></tr>
    </table> 
  </div>

Upvotes: 1

David Cheung
David Cheung

Reputation: 858

Try this:

$('#hello td').css('visibility', 'hidden');

Upvotes: 1

Related Questions