Jquery find: Uncaught TypeError: row.find is not a function

Question

I have this table:

<tbody class="schoolsRows">
    <tr>
        <td width="50%">
            <input type="text" class="classA schoolNameClass valid" id="1">
        </td>
        <td width="25%">
            <input type="text" class="classA postCodeClass valid" id="2">
        </td>
        <td width="25%">
            <input type="text" class="classA urnClass valid" id="3">
        </td>
        <td>
            <input type="button" value="Clear Content" onclick="clearRowContent(this)">
        </td>
    </tr>
</tbody>

On button click, I am trying to reach to each of the textboxes and clear it.

Here is my javascript code:

function clearRowContent(e) {
    var row = e.closest('tr');
    var textBoxToClear = row.find('.schoolNameClass');
}

I can get to the row, but the problem is when I try to get to the textboxes by using find or siblings I get this error

Uncaught TypeError: row.find is not a function

I wonder why is this happening.

Answer 1

bind e java script to jquery object , like $(e)

var row = $(e).closest('tr');

Answer 2

e is javascript object not jQuery. So , you cannot call jQuery methods on it.

Use jQuery to handle events:

$('.schoolsRows').on('click', 'button', function() {
    $(this).closest('tr').find('.schoolNameClass').val(''); // Clear value of textbox
});