CODEWITHSUNDEEP
jqueryhtmlhtml-tabledynamic-tables
Timothy
Timothy

Reputation: 33

JQuery Delete Row on dynamic tables

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?

Upvotes: 4

Views: 1108

Answers (1)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70139

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.

Upvotes: 2

Related Questions