JQuery Delete Row on dynamic tables

Question

I'm creating a registration page where the user can register several other people. I've made it so that the table only shows if the user selects a certain option. I've also added the add button and that adds rows perfectly fine. The problem is when I add the function for the delete button everything breaks. Here's my html:

<div id="add_table" style="display:none;" >
    <button type="button" id="AddLine">Add Line</button>
    <table border="1px" id="table">
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
            <td>Phone</td>
            <td>Email</td>
            <td>Ethnicity</td>
        </tr>
        <tr>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><input type=text /></td>
            <td><button type="button">delete</button></td>
        </tr>
    </table>
</div>

And here's my jquery code:

$(document).ready(function(e) { 
    $("input[name= 'Reg_num_r']").change( function () {
        if($(this).val()==1) {
            $("#add_table").hide();
        } else {
            $("#add_table").show();
        }
    });

    /*$("#table").on("click", "button", function() {
       $(this).closest("tr").remove(); 
    });*/

    $("#AddLine").click(function () {
        var row = "<tr><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td>                   <input type=text /></td><td><input type=text /></td><td><button type=button>delete</button></td></tr>";
        $("#table").append(row);
    });
});

Now when I uncomment the commented code above, everything stops working. The table just doesn't show up even if the user selects the right option. How should I fix it so it properly executes the delete row operation?

Hmm, I'm not seeing the problem [here](http://jsfiddle.net/FJfwX/). What version of jQuery are you using? `on` was introduced in 1.7. — Andrew Whitaker, Sep 16 '12 at 23:12
This is so weird... the commented code seems ok. Which version of jQuery are you using? Are you remembering to remove both the opening `/*` and the ending `*/` of the comment? — J. Bruni, Sep 16 '12 at 23:13
@AndrewWhitaker Yah I know, i tried the same thing which is why i posted here. I am so confused, how does it work in fiddle and not in practicality. — Richard, Sep 16 '12 at 23:15
@aziz.punjani how do i check in the console. Is that with firefox and firebug? — Richard, Sep 16 '12 at 23:16
In chrome/safari there's developer tools, in ie there's developer tools and in firefox there's firebug but i belive the newer version has developer tools built in. What browser are you using ? — aziz punjani, Sep 16 '12 at 23:17
Where is the input with name Reg_num_r defined? How is it being set? I see no problem when uncommenting that part of the code if I make the div visible before — Christian, Sep 16 '12 at 23:18
@Richard: Yep, you'll definitely want to use Firebug with FireFox. Enable it and then look at the "console" tab to see any errors that occurred. — Andrew Whitaker, Sep 16 '12 at 23:19
NEVERMIND, it's seriously just magic'ed. I really have no explanation for it but it just works now....Does anyone know how I can set a cap on the table? Can only enter certain amount of entries? — Richard, Sep 16 '12 at 23:22

score 2 · Accepted Answer · answered Sep 16 '12 at 23:44

Ctrl+CCtrl+V from your code:

/*$("#table").on("click", "button", function() {
    $(this).closest("tr").remove(); 
});*/

There's a 0-width space after the last semi-colon, click edit and use the arrow keys to see it. It's an illegal character in JavaScript and generates a Syntax Error.

That's a common problem when copying code from jsFiddle and other places.

I'd recommend having a copy of Notepad++ at hand to review copypasta code, it displays those invisible characters as ? by default:

enter image description here

You may also uncomment the code and test it in JSHint, it will tell you in what line there's an invalid character.

JQuery Delete Row on dynamic tables

1 Answers1