Add or remove rows dynamically from HTML table upon click

Question

I have the following code to add rows dynamically upon click:

<script language="javascript">
jQuery(function(){
    var counter = 1;
    jQuery('a.add-author').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = jQuery('<tr><td><input type="text" name="first_name' +
            counter + '"/></td><td><input type="text" name="last_name' +
            counter + '"/></td></tr>');
        jQuery('table.authors-list').append(newRow);
    });
});
</script>
<table class="authors-list">
<tr>
    <td>author's first name</td><td>author's last name</td>
</tr>
<tr>
    <td>
        <input type="text" name="first_name" />
    </td>
    <td>
        <input type="text" name="last_name" />
    </td>
</tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

The code works fine in jsFiddle, but when I copy it to my notepad, and try to run it from the WAMP server, it doesn't work.

Another question: how can I add a remove row button beside each row in order to remove the row upon click?

Please open the developer console built into your browser, and report what errors are shown. — user2437417
– user2437417, Commented Jun 26, 2013 at 14:09
If you add a button to a <td> tag you can use <button onclick="jQuery(this).parent().parent().remove();">Remove</button> to remove the row — netdigger
– netdigger, Commented Jun 26, 2013 at 14:11

dfsq · Accepted Answer · 2013-06-26 14:25:05Z

3

The answer to your second question (with slightly changed code):

$(function() {

    var $table = $('table.authors-list'),
        counter = 1;

    $('a.add-author').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = 
            '<tr>' + 
                '<td><input type="text" name="first_name' + counter + '"/></td>' +
                '<td><input type="text" name="last_name' + counter + '"/></td>' +
                '<td><a class="remove">remove</a></td>'
            '</tr>';
        $table.append(newRow);
    });

    // Remove rows on click
    $table.on('click', '.remove', function() {
        $(this).closest('tr').remove();
    });
});

http://jsfiddle.net/YsgEL/

So the best way to remove rows is to listen click events on some remove-links and delete corresponding parent row.

answered Jun 26, 2013 at 14:25

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maggie Over a year ago

That's exactly what I want. Thank you

Kimmax · Accepted Answer · 2013-06-26 14:12:49Z

3

Are you sure that you have loaded JQuery correctly into your HTML file? JQuery could be loaded in JSFilde already but is maybe missing on your Project.

answered Jun 26, 2013 at 14:12

Kimmax

1,70822 silver badges34 bronze badges

3 Comments

maggie Over a year ago

No I'm not sure, how can I load it?

Kimmax Over a year ago

Put the following in your HTML Header (betweeen <head> and </html>) and check if it's working. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

maggie Over a year ago

Do you know how to add a delete row button?

Jeff Noel · Accepted Answer · 2013-06-26 14:17:44Z

1

Add the following line of code before your <script> tag:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

This will load the jQuery library into your web page, letting you use all the functions and properties of jQuery or $ object.

answered Jun 26, 2013 at 14:17

Jeff Noel

7,6274 gold badges43 silver badges67 bronze badges

Comments

Atrox111 · Accepted Answer · 2013-06-26 14:15:49Z

0

Answer to your first question: Please provide us with further information... This problem can be caused by several reasons.

Answer to your second question: You can append a remove button with class "remove_button" to your variable called "newRow" and add an ID to it (i.e id="remove_button_" + counter).

When clicking on the remove button call a function which is extracting the number of the button's ID and remove the other elements with same number by using remove() function

answered Jun 26, 2013 at 14:15

Atrox111

5274 silver badges17 bronze badges

Collectives™ on Stack Overflow

Add or remove rows dynamically from HTML table upon click

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related