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    lt table gt       lt tr gt       lt td gt  lt button type  button   class  removebutton  title  Remove this row  gt X lt  button gt   lt  td gt             lt td gt  lt input type  text  id  txtTitle  name  txtTitle  gt  lt  td gt             lt td gt  lt input type  text  id  txtLink  name  txtLink  gt  lt  td gt        lt  tr gt   lt  table gt   lt button id   addbutton  gt Add Row lt  button gt    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

User · Accepted Answer

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;
 });

User · Answer

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

User · Answer

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

User · Answer

document body  on  click    buttontrash   function          lt -- changes     alert  aa          this  closest  tr   remove        return false        This works perfectly  take not of document body

User · Answer

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

User · Answer

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       lt tr gt   lt td gt  lt span id  spDeleteRow  onclick  deleteRow this   gt X lt  td gt   lt td gt  blah blah  lt  td gt   lt  tr gt       and it works fine

[jquery] Delete dynamically-generated table row using jQuery

Examples related to jquery

Examples related to html