单击按钮时删除行答案

【问题标题】：Remove row when button is clicked单击按钮时删除行
【发布时间】：2015-10-29 20:27:55
【问题描述】：

我正在尝试在 Google 应用脚本中使用 HtmlService 来执行此操作。我已经对其进行了研究，但我无法弄清楚为什么以下内容不起作用。 https://jsfiddle.net/pfue7b71/

脚本

function removeRow() {
  //  alert("run");
    $(this).closest('tr').remove();
};

HTML

<table>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow()" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow()" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow()" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow()" value="X"></td>
    </tr>
</table>

【问题讨论】：

标签： javascript jquery google-apps-script

【解决方案1】：

这是因为函数的上下文。在onClick 属性上运行的直接代码使用对象上下文工作，因此它具有对this 作为当前对象的正确引用，但对removeRow 的调用是在窗口上下文中进行的，因此对this 是窗口，而不是对象。你可以用你当前的代码来解决这个问题：

function removeRow(object){
    $(object).closest('tr').remove();
};

并将调用更改为：

<table>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
</table>

给你：https://jsfiddle.net/pfue7b71/2/

另外，为了将来参考，您应该尝试使用console.log 而不是alert，并使用它来记录重要的事情，例如$(this)

【讨论】：

如果我在 App Script 中使用 htmlService，我在哪里可以看到 console.log？我知道如何在 .gs 文件中执行此操作，但在 html 文件中不知道。
刚刚回答了我自己的问题。我必须去浏览器并打开开发者工具控制台。
希望你自己发现，因为我什至不知道 App Script xD 中的 htmlService 是什么

【解决方案2】：

您需要确保 this 引用的是 DOM 元素，而不是函数。

<table>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
</table>

您还需要将函数重命名为 removeRow，因为您在 HTML 中调用它（在小提琴中不正确）。

function removeRow(e) {
    $(e).closest('tr').remove();
};

https://jsfiddle.net/pfue7b71/3/

【讨论】：