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 · 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

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

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

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

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

User · 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          lt -- changes      alert  aa           this  closest  tr   remove         return false

[jquery] Delete dynamically-generated table row using jQuery

Examples related to jquery

Examples related to html