Question: I have an element that is inside a table somewhere.
I need to get his tbody element.

How can I do that?

Tried `$(this).closest('tbody')`

But it looks like it did not work..

My code:

```
$("table").on('click', ['td'], function(event) {

    if ($(this).hasClass('uneditable')) { return; }
    // here I need to check the tbody element
    console.log($(this).closest("tbody"))
    }

```

Maybe I am doing this wrong, because I want to apply this function only if a click on a table with specific classes for elements:

* table - `dattable`
* tbody - `editabe`
* td - not `uneditable`

Thanks !

Answer: 
You should use `$("table").on('click', 'td',` and **not** `$("table").on('click', ['td'],`

```js
console.log($('#a1').closest('tbody').length)

$("table").on('click', 'td', function(event) {
  if ($(this).hasClass('uneditable')) { return; }
  // here I need to check the tbody element
  console.log($(this).closest("tbody").length)
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><div id="a1">asdf</div></td>
  </tr>
</table>
```

By using `['td']` - `this` is a reference to the `table` (and not the cell - `td`), so you can't use the `closest` to find the `tbody` element.

update
------

If you want to select only `td`s that **dont** have a specific class you can use the `:not` pseudo-class:

```js
$("table").on('click', 'td:not(.uneditable)', function(event) {
  console.log($(this).closest("tbody").length)
});
```

```css
.uneditable {
  background: red;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="t"><div>asdf</div></td>
  </tr><tr>
    <td class="uneditable"><div>asdf</div></td>
  </tr><tr>
    <td class="t"><div>asdf</div></td>
  </tr>
</table>
```
Use `:not()`

```
$("table").on('click', 'td:not(".uneditable")', function(event) {

});

```

FYI, don't forget to replace `['td']` with `td`

```js
console.log($('#a1').closest('tbody').length)
$("table.datatable").on('click', 'td:not(".uneditable")', function(event) {
  console.log($(this).closest("tbody.editable").length)
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>1st table</h1>
<table class="datatable">
  <tbody class="editable">
  <tr>
    <td class="uneditable"><div id="a1">ABC</div></td>
    <td class="uneditable"><div id="a1">XYZ</div></td>
    <td><div id="a1">PQR</div></td>
  </tr>
  </tbody>
</table>
<h1>2nd table</h1>
<table class="datatableNot">
  <tbody class="editable">
  <tr>
    <td class="uneditable"><div id="a1">ABC</div></td>
    <td class="uneditable"><div id="a1">XYZ</div></td>
    <td><div id="a1">PQR</div></td>
  </tr>
  </tbody>
</table>
```