3

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>

2 Answers 2

3

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)

3
  • Where can I see the console.log, if I am using htmlService in App Script? I know how to do it in the .gs file but not in the html file. Oct 30, 2015 at 12:23
  • Just answered my own question. I have to go to the browser and open the Developer Tools Console. Oct 30, 2015 at 12:29
  • Hopefully you found out alone, because I don't even know what's an htmlService in App Script xD
    – Piyin
    Oct 31, 2015 at 13:16
0

You need to make sure that this is referencing the DOM element, not the function.

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

You also need to rename the function to removeRow, as you're calling it in the HTML (was incorrect in fiddle).

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.