Delete dynamically-generated table row using jQuery

Question

the code below add and remove table row with the help of Jquery the add function works fine but the remove only work if I remove the first row

<table>
    <tr>
    <td><button type="button"  class="removebutton" title="Remove this row">X</button>
</td> 
         <td><input type="text" id="txtTitle" name="txtTitle"></td> 
         <td><input type="text" id="txtLink" name="txtLink"></td> 
    </tr>
</table>
<button id ="addbutton">Add Row</button>

and the script

 var i = 1;
$("#addbutton").click(function() {
  $("table tr:first").clone().find("input").each(function() {
    $(this).val('').attr({
      'id': function(_, id) {return id + i },
      'name': function(_, name) { return name + i },
      'value': ''               
    });
  }).end().appendTo("table");
  i++;
});

$('button.removebutton').on('click',function() {
    alert("aa");
  $(this).closest( 'tr').remove();
  return false;
});

can anyone give me the explanation why I can only remove the first row ? thank so much

isherwood · Accepted Answer · 2014-04-23 15:42:56Z

39

You need to use event delegation because those buttons don't exist on load:

http://jsfiddle.net/isherwood/Z7fG7/1/

 $(document).on('click', 'button.removebutton', function () { // <-- changes
     alert("aa");
     $(this).closest('tr').remove();
     return false;
 });

answered Apr 23, 2014 at 15:42

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

Comments

Community · Accepted Answer · 2019-07-24 13:53:59Z

5

You should use Event Delegation, because of the fact that you are creating dynamic rows.

$(document).on('click','button.removebutton', function() {
    alert("aa");
  $(this).closest('tr').remove();
  return false;
});

Live Demo

edited Jul 24, 2019 at 13:53

CommunityBot

11 silver badge

answered Apr 23, 2014 at 15:45

Wilfredo P

4,07430 silver badges46 bronze badges

Comments

Danny · Accepted Answer · 2014-04-23 15:43:35Z

3

When cloning, by default it will not clone the events. The added rows do not have an event handler attached to them. If you call clone(true) then it should handle them as well.

http://api.jquery.com/clone/

answered Apr 23, 2014 at 15:43

Danny

1,7583 gold badges23 silver badges36 bronze badges

3 Comments

Danny Over a year ago

@isherwood - it's only recently that I've come across your style of event delegation. I was always attaching events immediately after creating objects. I like your way because I could have a section of code where I group all my event handling right up front. Is it a matter of personal preference, or is one way more standard than the other?

isherwood Over a year ago

I'd say it's situation-dependent. What's more clear to the next developer stumbling through your code?

Danny Over a year ago

Fair enough. I would just rather not set it up pre-stumbled. :)

Andre Figueiredo · Accepted Answer · 2014-04-23 15:44:35Z

1

A simple solution is encapsulate code of button event in a function, and call it when you add TRs too:

 var i = 1;
$("#addbutton").click(function() {
  $("table tr:first").clone().find("input").each(function() {
    $(this).val('').attr({
      'id': function(_, id) {return id + i },
      'name': function(_, name) { return name + i },
      'value': ''               
    });
  }).end().appendTo("table");
  i++;

  applyRemoveEvent();  
});


function applyRemoveEvent(){
    $('button.removebutton').on('click',function() {
        alert("aa");
      $(this).closest( 'tr').remove();
      return false;
    });
};

applyRemoveEvent();

http://jsfiddle.net/Z7fG7/2/

answered Apr 23, 2014 at 15:44

Andre Figueiredo

13.5k8 gold badges52 silver badges75 bronze badges

Comments

atamata · Accepted Answer · 2019-08-05 10:18:42Z

0

I know this is old but I've used a function similar to this...

deleteRow: function (ctrl) {

    //remove the row from the table
    $(ctrl).closest('tr').remove();

}

... with markup like this ...

<tr>
<td><span id="spDeleteRow" onclick="deleteRow(this)">X</td>
<td> blah blah </td>
</tr>

...and it works fine

answered Aug 5, 2019 at 10:18

atamata

1,1674 gold badges17 silver badges35 bronze badges

Comments

Uchenna Nnodim · Accepted Answer · 2017-08-30 06:37:56Z

-1

  $(document.body).on('click', 'buttontrash', function () { // <-- changes
    alert("aa");
   /$(this).closest('tr').remove();
    return false;
});

This works perfectly, take not of document.body

answered Aug 30, 2017 at 6:37

Uchenna Nnodim

4845 silver badges11 bronze badges

1 Comment

vr_driver Over a year ago

Sorry, but this is a direct copy of Wilfredo's but it won't work either. You have half of a comment.

Collectives™ on Stack Overflow

Delete dynamically-generated table row using jQuery

6 Answers 6

Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related