将内联JavaScript重写为外部函数-此参考

Question

我正在尝试从对常规javascript函数的内联按钮onclick调用中重写一些javascript代码。

我在代码中使用了此引用，以删除一个表列，该表列工作得很好。由于我需要在一些地方使用该行代码，因此我希望它位于常规的javascript函数中。

我所拥有的：

<button type="button"  tabindex="-1" class="btn btn-secondary btn-tblrmv" onclick="if(!$(this).closest('tr').hasClass('notDeletable')){ $(this).closest('tr').remove(); }">
   <i class="mdi mdi-minus"></i>
</button>

关于javasript函数本身：

function removeTableRow(){
     if(!$(this).closest('tr').hasClass('notDeletable')){ 
          $(this).closest('tr').remove(); 
     }
}

有人可以解释一下，为什么这没有按预期进行？

Answer 1

这不起作用，因为 this 没有引用当前元素。尝试：

HTML：

  <button type="button" tabindex="-1" class="btn btn-secondary btn-tblrmv" onclick="removeTableRow(this)">
       <i class="mdi mdi-minus"></i>
    </button>

JS：

function removeTableRow (row) {
     if (!$(row).closest('tr').hasClass('notDeletable')) { 
          $(row).closest('tr').remove(); 
     }
}