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();
        });
    });
});