Add delete row from a table

Question

I have this table with some dependents information and there is a add and delete button for each row to add delete additional dependents  When I click  add  button  a new row gets added to the table  but when I click the  delete  button  it deletes the header row first and then on subsequent clicking  it deletes the corresponding row    Here is what I have   Javascript code     function deleteRow row         var d   row parentNode parentNode rowIndex        document getElementById  dsTable   deleteRow d          HTML code   lt table id    dsTable   gt         lt tr gt            lt td gt  Relationship Type  lt  td gt            lt td gt  Date of Birth  lt  td gt            lt td gt  Gender  lt  td gt         lt  tr gt         lt tr gt            lt td gt  Spouse  lt  td gt            lt td gt  1980-22-03  lt  td gt            lt td gt  female  lt  td gt            lt td gt   lt input type  button  id   addDep  value  Add  onclick    add     lt  td gt            lt td gt   lt input type  button  id   deleteDep  value  Delete  onclick    deleteRow this     lt  td gt         lt  tr gt          lt tr gt            lt td gt  Child  lt  td gt            lt td gt  2008-23-06  lt  td gt            lt td gt  female  lt  td gt            lt td gt   lt input type  button  id   addDep  value  Add  onclick    add    lt  td gt            lt td gt    lt input type  button  id   deleteDep  value  Delete  onclick    deleteRow this    lt  td gt         lt  tr gt      lt  table gt

User · Accepted Answer

JavaScript with a few modifications   function deleteRow btn      var row   btn parentNode parentNode    row parentNode removeChild row       And the HTML with a little difference    lt table id  dsTable  gt     lt tbody gt       lt tr gt         lt td gt Relationship Type lt  td gt         lt td gt Date of Birth lt  td gt         lt td gt Gender lt  td gt       lt  tr gt       lt tr gt         lt td gt Spouse lt  td gt         lt td gt 1980-22-03 lt  td gt         lt td gt female lt  td gt         lt td gt  lt input type  button  value  Add  onclick  add     gt  lt  td gt         lt td gt  lt input type  button  value  Delete  onclick  deleteRow this    gt  lt  td gt       lt  tr gt       lt tr gt         lt td gt Child lt  td gt         lt td gt 2008-23-06 lt  td gt         lt td gt female lt  td gt         lt td gt  lt input type  button  value  Add  onclick  add     gt  lt  td gt         lt td gt  lt input type  button  value  Delete  onclick  deleteRow this    gt  lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt

User · Answer

Here s the code JS Bin using jQuery  Tested on all the browsers  Here  we have to click the rows in order to delete it with beautiful effect  Hope it helps

User · Answer

Lots of good answers  but here is one more     You can add handler for the click to the table   lt table id    dsTable  onclick  tableclick event   gt    And then just find out what the target of the event was  function tableclick e        if  e       e   window event       if e target value     Delete          deleteRow  e target parentNode parentNode rowIndex        Then you don t have to add event handlers for each row and your html looks neater  If you don t want any javascript in your html you can even add the handler when page loads   document getElementById  dsTable   addEventListener  click  tableclick false         Here is working code  http   jsfiddle net hX4f4 2

User · Answer

Hi I would do something like this   var id   4     inital number of rows plus one function addRow          add a new tr with id        increment id     function deleteRow id              id  remove        and i would have a  table like this    lt table id    dsTable   gt         lt tr id 1 gt            lt td gt  Relationship Type  lt  td gt            lt td gt  Date of Birth  lt  td gt            lt td gt  Gender  lt  td gt         lt  tr gt         lt tr id 2 gt            lt td gt  Spouse  lt  td gt            lt td gt  1980-22-03  lt  td gt            lt td gt  female  lt  td gt            lt td gt   lt input type  button  id   addDep  value  Add  onclick    add     lt  td gt            lt td gt   lt input type  button  id   deleteDep  value  Delete  onclick    deleteRow 2     lt  td gt         lt  tr gt          lt tr id 3 gt            lt td gt  Child  lt  td gt            lt td gt  2008-23-06  lt  td gt            lt td gt  female  lt  td gt            lt td gt   lt input type  button  id   addDep  value  Add  onclick    add    lt  td gt            lt td gt    lt input type  button  id   deleteDep  value  Delete  onclick    deleteRow 3    lt  td gt         lt  tr gt      lt  table gt    Also if you want you can make a loop to build up the table  So it will be easy to build the table  The same you can do with edit

User · Answer

I suggest using jQuery  What you are doing right now is easy to achieve without jQuery  but as you will want new features and more functionality  jQuery will save you a lot of time  I would also like to mention that you shouldn t have multiple DOM elements with the same ID in one document  In such case use class attribute   html    lt table id  dsTable  gt     lt tr gt        lt td gt  Relationship Type  lt  td gt        lt td gt  Date of Birth  lt  td gt        lt td gt  Gender  lt  td gt     lt  tr gt     lt tr gt        lt td gt  Spouse  lt  td gt        lt td gt  1980-22-03  lt  td gt        lt td gt  female  lt  td gt        lt td gt   lt input type  button  class  addDep  value  Add   gt  lt  td gt        lt td gt   lt input type  button  class  deleteDep  value  Delete   gt  lt  td gt     lt  tr gt      lt tr gt        lt td gt  Child  lt  td gt        lt td gt  2008-23-06  lt  td gt        lt td gt  female  lt  td gt        lt td gt   lt input type  button  class  addDep  value  Add   gt  lt  td gt        lt td gt   lt input type  button  class  deleteDep  value  Delete   gt  lt  td gt     lt  tr gt   lt  table gt    javascript      body   on  click    input deleteDep   function          this  parents  tr   remove            Remember that you need to reference jQuery    lt script type  text javascript  src  http   code jquery com jquery-1 8 3 min js  gt  lt  script gt   Here a working jsfiddle example  http   jsfiddle net p9dey 1

User · Answer

jQuery has a nice function for removing elements from the DOM   The closest   function is cool because it will  get the first element that matches the selector by testing the element itself and traversing up through its ancestors      this  closest  tr   remove     Each delete button could run that very succinct code with a function call

User · Answer

I would try formatting your table correctly first off like so   I cannot help but thinking that formatting the table could at the very least not do any harm    lt table gt      lt thead gt         lt th gt Header1 lt  th gt                   lt  thead gt      lt tbody gt          lt tr gt  lt td gt Content1 lt  td gt      lt  tr gt                    lt  tbody gt   lt  table gt

[javascript] Add/delete row from a table

Examples related to javascript

Examples related to html-table