A.nodeName - undefined jquery error

Question

a.nodeName undefined

I looked at it, but the explanations did not seem completely clear to me.

function deleteThisRow() {
    $(this).closest('tr').fadeOut(400, function(){
        $(this).remove();
    });
}

<tr>
    <td>blah blah blah</td>
    <td>
        <img src="/whatever" onClick="deleteThisRow()">
    </td>
</tr>

Answer 1

The keyword thisin your function does not refer to the element that was clicked. By default, it refers to the highest element in the DOM that will be window.

To fix this, you can use an unobtrusive event handler instead of the deprecated event attribute on*, since they work in the scope of the element that raised the event. try it:

$("tr td img").click(deleteThisRow);

function deleteThisRow() {
  $(this).closest('tr').fadeOut(400, function() {
    $(this).remove();
  });
}

img {
  width: 20px;
  height: 20px;
  border: 1px solid #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>blah blah blah 1</td>
    <td><img src="/whatever"></td>
  </tr>
  <tr>
    <td>blah blah blah 2</td>
    <td><img src="/whatever"></td>
  </tr>
  <tr>
    <td>blah blah blah 3</td>
    <td><img src="/whatever"></td>
  </tr>
</table>

Run codeHide result

Answer 2

Try:

$(document).ready(function() {
    $("img").click(function() {
        $(this).closest('tr').fadeOut(400, function(){
            $(this).remove();
        });
    });
});

Answer 3

, . - , , - .

:

$(document).ready(() => {
  $('#client_id').change(() => {
    const clientId = $(this).val();
    console.log(clientId);
  });
});

:

TypeError: i.nodeName is undefined

Further research revealed that $ (this) calls a window object, not a select element. (As Rory pointed out above: fooobar.com/questions/1098983 / ... )

It worked. The value was displayed on the console.

$(document).ready(() => {
  $('#client_id').change(function changeClient() {
    const clientId = $(this).val();
    console.log(clientId);
  });
});