CODEWITHSUNDEEP
javascriptjquery
user1766306
user1766306

Reputation: 117

hide child element on click

I am trying to hide "arrow_o" on click of "thead" but it is not working. Does jquerys "children" not work in tables?

html

<thead class="thead">
  <tr>
    <th>
      <div class="arrow_o"></div>
    </th>
  </tr>
</thead>

js

$(document).ready(function() {
  $('.thead').click(function() {
    $(this).children('.arrow_o').hide();
  });
});

Upvotes: 1

Views: 1160

Answers (3)

wanovak
wanovak

Reputation: 6127

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

jQuery children

Use .find() instead.

Upvotes: 2

Kato
Kato

Reputation: 40582

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

So this:

$(document).ready(function() {
  $('.thead').click(function() {
    $(this).find('.arrow_o').hide();
  });
});

Upvotes: 5

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

Try $('.arrow_o', this).hide(); which basically sets the context where the arrow_o should be located.

Full Code:

$(document).ready(function() {
  $('.thead').click(function() {
     $('.arrow_o', this).hide();
  });
});

Upvotes: 2

Related Questions