jquery add/delete html row

Question

i have a simple html table where i want to delete and add rows dynamically. the html table has a delete icon, by clicking on it a jquery script deletes the row.
code for the table:

<table id="table1"><tr><td>
<img class="delete" alt="delete" src="delete_icon.png" />
</td></tr></table>

a link adds a new row:

<a href="#" name="addRow">Add Row</a>

both jquery scripts above the html table code:

<script type="text/javascript">
    /* delete row */
    $(document).ready(function () {
        $('#table1 td img.delete').click(function () {
            $(this).parent().parent().remove();
        });
    });

    /* add new row */
    $(document).ready(function () {
        // Code between here will only run when the document is ready
        $("a[name=addRow]").click(function () {
            // Code between here will only run when the a link is clicked and has a name of addRow
            $("table#table1 tr:last").after('<tr><td><img class="delete" alt="delete" src="@Url.Content("~/content/delete_icon.png")" /></td></tr>');
            return false;
        });
    });

</script>

the problem is the following: both delete and insert operations work. however when i add a new row and try to delete this row, nothing happens. i can only delete already existing rows, the jquery script doesn't work on newly added rows.

any ideas?

mnelson · Accepted Answer · 2011-03-27 20:25:22Z

3

You need to use live()

$('#table1 td img.delete').live('click', function(){ ... });
$("a[name=addRow]").live('click', function (){ ... });

answered Mar 27, 2011 at 20:25

mnelson

3,0221 gold badge19 silver badges19 bronze badges

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

Comments

balpha · Accepted Answer · 2011-03-27 20:23:52Z

1

$('#table1 td img.delete').click(function () {

only binds the click handler to elements that are already present. You either have to bind this handler to the newly added rows at the moment you add them, or use event delegation via .delegate or .live.

answered Mar 27, 2011 at 20:23

balpha♦

51.2k18 gold badges114 silver badges133 bronze badges

2 Comments

kmb Over a year ago

thanks, that seems to be the problem. i'm new to jquery, can you show me how to bind the click handler to the new element in this example? thanks!

balpha Over a year ago

@kmb: If you replace .click( by .live("click", it should work. It's not the most efficient solution though, because it has to check every click event, no matter where it happens; using .delegate (see the doc I linked to), you can constrain this to clicks within the table.

ChrisR · Accepted Answer · 2011-03-27 20:24:14Z

1

That's because the newly added rows don't have the click event handler attached to the delete link. You'll have to manually add it when creating the new row or use live() which will automatically attach events to newly created DOM nodes.

answered Mar 27, 2011 at 20:24

ChrisR

14.5k17 gold badges73 silver badges112 bronze badges

Comments

Swaff · Accepted Answer · 2011-03-27 20:31:09Z

1

You need to use the jQuery live function that allows you to bind events to elements that have not yet been introduced to the DOM.

$(document).ready(function() {
    $('#table1 td .delete').live('click', function() {
        $(this).parent().parent().remove();
    });
});

I have added an example here on jsFiddle but had to swap your img tags for a tags not have access to your image.

answered Mar 27, 2011 at 20:31

Swaff

13.7k4 gold badges28 silver badges26 bronze badges

Comments

Billy Moon · Accepted Answer · 2011-03-27 20:26:52Z

0

The new elements are not getting the click handler attached. You can re-attach it every time you add a row by executing the same code to initialize but during click event.

See jsfiddle here: http://jsfiddle.net/

answered Mar 27, 2011 at 20:26

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Collectives™ on Stack Overflow

jquery add/delete html row

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related