Remove table row after clicking table row delete button

Question

Solution can use jQuery or be plain JavaScript   I want to remove a table row after user has clicked the corresponding button contained in the table row cell so for example    lt script gt  function SomeDeleteRowFunction        no clue what to put here     lt  script gt    lt table gt      lt tr gt          lt td gt  lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction    gt  lt  td gt      lt  tr gt      lt tr gt          lt td gt  lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction    gt  lt  td gt      lt  tr gt      lt tr gt          lt td gt  lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction    gt  lt  td gt      lt  tr gt   lt  table gt

User · Answer

you can do it like this    lt script gt      function SomeDeleteRowFunction o           no clue what to put here       var p o parentNode parentNode           p parentNode removeChild p              lt  script gt        lt table gt          lt tr gt              lt td gt  lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction this   gt  lt  td gt          lt  tr gt          lt tr gt              lt td gt  lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction this   gt  lt  td gt          lt  tr gt          lt tr gt              lt td gt  lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction this   gt  lt  td gt          lt  tr gt       lt  table gt

User · Answer

As  gaurang171 mentioned  we can use  closest   which will return the first ancestor  or the closest  to our delete button  and use  remove   to remove it  This is how we can implement it using jQuery click event instead of using JavaScript onclick  HTML   lt table id  quot myTable quot  gt   lt tr gt     lt th width  quot 30  quot  style  quot color red  quot  gt ID lt  th gt     lt th width  quot 25  quot  style  quot color red  quot  gt Name lt  th gt     lt th width  quot 25  quot  style  quot color red  quot  gt Age lt  th gt     lt th width  quot 1  quot  gt  lt  th gt   lt  tr gt    lt tr gt     lt td width  quot 30  quot  style  quot color red  quot  gt SSS-001 lt  td gt     lt td width  quot 25  quot  style  quot color red  quot  gt Ben lt  td gt     lt td width  quot 25  quot  style  quot color red  quot  gt 25 lt  td gt     lt td gt  lt button type  button  class  btnDelete  gt x lt  button gt  lt  td gt   lt  tr gt    lt tr gt     lt td width  quot 30  quot  style  quot color red  quot  gt SSS-002 lt  td gt     lt td width  quot 25  quot  style  quot color red  quot  gt Anderson lt  td gt     lt td width  quot 25  quot  style  quot color red  quot  gt 47 lt  td gt     lt td gt  lt button type  button  class  btnDelete  gt x lt  button gt  lt  td gt   lt  tr gt    lt tr gt     lt td width  quot 30  quot  style  quot color red  quot  gt SSS-003 lt  td gt     lt td width  quot 25  quot  style  quot color red  quot  gt Rocky lt  td gt     lt td width  quot 25  quot  style  quot color red  quot  gt 32 lt  td gt     lt td gt  lt button type  button  class  btnDelete  gt x lt  button gt  lt  td gt   lt  tr gt    lt tr gt     lt td width  quot 30  quot  style  quot color red  quot  gt SSS-004 lt  td gt     lt td width  quot 25  quot  style  quot color red  quot  gt Lee lt  td gt     lt td width  quot 25  quot  style  quot color red  quot  gt 15 lt  td gt     lt td gt  lt button type  button  class  btnDelete  gt x lt  button gt  lt  td gt   lt  tr gt                                 jQuery    document  ready function            quot  myTable quot   on  click    btnDelete  function               this  closest  tr   remove                     Try in JSFiddle  click here

User · Answer

Following solution is working fine   HTML    lt table gt     lt tr gt       lt td gt         lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction this    gt       lt  td gt     lt  tr gt     lt tr gt       lt td gt         lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction this    gt       lt  td gt     lt  tr gt     lt tr gt       lt td gt         lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction this    gt       lt  td gt     lt  tr gt   lt  table gt    JQuery   function SomeDeleteRowFunction btndel        if  typeof btndel      object               btndel  closest  tr   remove          else           return false            I have done bins on http   codebins com bin 4ldqpa9

User · Answer

Using pure Javascript   Don t need to pass this to the SomeDeleteRowFunction      lt td gt  lt input type  button  value  Delete Row  onclick  SomeDeleteRowFunction    gt  lt  td gt    The onclick function   function SomeDeleteRowFunction              event target will be the input element        var td   event target parentNode         var tr   td parentNode     the row to be removed       tr parentNode removeChild tr

User · Answer

You can use jQuery click instead of using onclick attribute  Try the following      table   on  click    input type  button     function e        this  closest  tr   remove        Demo

[javascript] Remove table row after clicking table row delete button

Examples related to javascript

Examples related to jquery

Examples related to html-table

Examples related to row