javascript - a.nodeName は未定義の Jquery エラーです

Question

a.nodeName が定義されていません

私はこれを調べましたが、説明は私にはまったく明確ではないようでした。

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

関数のthisキーワードは、クリックされた要素を参照していません。デフォルトでは、DOM の最上位の要素であるwindow.

これを修正するには、古いon*イベント属性の代わりに控えめなイベント ハンドラーを使用できます。これは、イベントを発生させた要素のスコープで実行されるためです。これを試して：

$("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>

Answer 2

試す：

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