Delete row from table using JQuery. Please see code

Question

I used a code which I got in the net that adds a table row every onclick event. It worked perfect for me until I realized I needed to have an onclick event for every row that when clicked, it will delete the row.

Is there a way for that to happen using my code?

Please see codes below:

Javascript/JQuery code:

<script>
    var counter = 2;            
    function addRow() {
        event.preventDefault();
        var newRow = jQuery('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' +              counter + '"/></td></tr>');
        counter++;                
        jQuery('table.actionsteps-list').append( newRow );
    }
</script>

HTML Code:

<table class="actionsteps-list" width="510">
   <tr>
       <th colspan="3" align="left">Action Steps</th>
   </tr>
   <tr>
       <td>Step #</td><td>Action Step</td><td>Owner</td>
   </tr>
   <tr>
       <td><label>1</label></td>
       <td><textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td>
       <td valign="top"><input type="text" name="txtOwner1" /></td>
   </tr>
</table>
<table width="510">
   <tr>
       <td align="right"><a href="#" title="" onclick="javascript:addRow();">Add Action</a></td>
   </tr>
</table>

Thank you!

possible duplicate of How to delete a row from a dynamic generate table using jquery? — Barmar
– Barmar, Commented Sep 12, 2013 at 6:50
event.preventDefault();, this line will throw script error as event is not defined. Comment out this line and try.. — Surama Hotta
– Surama Hotta, Commented Sep 12, 2013 at 6:51

ahren · Accepted Answer · 2013-09-12 06:49:16Z

3

Sure, using delegation we can accomplish that.

$('table.actionsteps-list').on('click', 'tr', function(e){
  $(this).remove();
});

You probably want to add a button to your row to signal a deletion, so let's assume you add (to each row):

<td><button class="delete">Delete</button></td>

Then just change your delegation method like this:

$('table.actionsteps-list').on('click', '.delete', function(e){ 
  e.preventDefault(); // stops the page jumping to the top
  $(this).closest('tr').remove();
});

answered Sep 12, 2013 at 6:49

ahren

17k5 gold badges52 silver badges70 bronze badges

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

9 Comments

heinistic Over a year ago

Hello, ahren I tried this one but unfortunately all added rows were deleted. I added three rows and when I clicked the delete button for the 2nd one, all three were gone.

heinistic Over a year ago

Hi ahren, I guess the reason why it doesn't work for me is because when I clicked the delete button, it submits the form. I tried putting type=button inside the button but when I did this, it didn't work anymore. Maybe if I use <button type="button" onclick="deleteRow"> tag, it will work? But how would my JQuery function for delete row look like?

ahren Over a year ago

@aguas - no need to use inline javascript. See above for the delegated event handler, which has e.preventDefault() - this would stop the form from being submitted.

heinistic Over a year ago

It's still not working :( even with e.preventDefault() the form is submitting whenever I click the delete button. Is there anyway you can check my whole code? Pls help

ahren Over a year ago

@SearchForKnowledge - this will work if you create the row dynamically. However, if you create the table dynamically you'd need to bind this handler after it's added to the DOM.

|

Guffa · Accepted Answer · 2013-09-12 06:55:42Z

1

Use a delegate ot catch the event at the table level, that way any new row that you add will also be handled:

$('.actionsteps-list').on('click', 'tr', function(){
  $(this).remove();
});

Side note:

Don't use the javascript: protocol for inline Javascript, that's only used when you put Javascript in the href attribute of a link:

<a href="#" title="" onclick="addRow();">Add Action</a>

answered Sep 12, 2013 at 6:55

Guffa

703k112 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

Delete row from table using JQuery. Please see code

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related