Remove row when button is clicked

Question

I am trying to do this using HtmlService in a Google App Script. I have researched it and I cannot figure out why the below doesn't work. https://jsfiddle.net/pfue7b71/

Script

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>

Answer 1

It's because of the context of the function. The immediate code that runs on the onClick attribute, works using the object context, so it has the right reference to this as the current object, but the call to removeRow is made on Window context, so the reference to this is Window, and not the object. You could solve that with your current code doing this:

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

And changing the calls to:

<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>

Here you go: https://jsfiddle.net/pfue7b71/2/

Also, for future reference, you should try using console.log instead of alert, and use it to log important things like, for example, $(this)