Find closest parent in JQuery

Posted on 08-05-2013 21:54 by graham
This tutorial shows how to find the closest parent element of a given element using JQuery. It uses the closest method some selectors that put conditions on what the parent element should meet.

Using closest to find elements


Let's say we have a table with some rows and field in each row. Now, we want to hide all rows that have CSS class toggling and contain a text area. This is our code
<table>
<tbody>
<tr>
<td><textarea name="someName1"></textarea></td>
</tr>
<tr class="toggling">
<td><textarea name="someName2"></textarea></td>
</tr>
<tr class="toggling">
<td><input type="text" name="someName3"></input></td>
</tr>
</tbody>
</table>

To find and hide all tr elements with class toggling and containing a textarea, we do the following:
$("textarea").closest("tr.toggling").hide();

To try it out yourself, see this code sample in our code sandbox.
Comments

 

Add comment

Has this tutorial been helpful to you? Or do you see anything wrong? We appreciate your opinion!
Your comment:
Show formatting hints
HTML is disallowed, but in your text you can use the following markup
  • [code][/code] for a block of code
  • [tt][/tt] for inline code
  • [link]link href|link anchor[/link] for links
  • [b][/b] for bold text
Email:
+ Ask a question
If you have a technical question related to programming and computers, ask it here. Other users will help you solve it!
Unanswered questions
Share your knowledge by helping others solve their problems