CODEWITHSUNDEEP
javascriptjqueryhtml
Prinu Philip
Prinu Philip

Reputation: 189

How to delete table row by using both row id and table id in javascript?

<table id = 'dsTable' >
      <tr id=1>
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr id=2>
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)"  </td>
      </tr>
      <tr id=3>
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
      </tr>
</table>

I want to delete the row by using both table id and row id in javascript. javascript code looks like this:

var child = document.getElementById(rowid);
child.parentNode.removeChild(child);

Here I am facing problem, the jsp page having multiple tables. So if I am trying to delete the row,it is deleting the other table rows. If I specify the table id along with row id the code will work fine.

Upvotes: 1

Views: 1556

Answers (1)

gurvinder372
gurvinder372

Reputation: 68413

Ids are suppose to be unique across your DOM, but you can first get the table

var table = document.getElementById("tableid");

var row = table.querySelector("tr[id='rowid']");

I recommend to use a different attribute other than id something like data-id

Now delete the row as

row.parentNode.removeChild(row)


var table = document.getElementById("dsTable");

var row = table.querySelector("tr[data-id='1']");

row.parentElement.removeChild(row);
<table id = 'dsTable' >
      <tr data-id="1">
         <td> Relationship Type </td>
         <td> Date of Birth </td>
         <td> Gender </td>
      </tr>
      <tr data-id="2">
         <td> Spouse </td>
         <td> 1980-22-03 </td>
         <td> female </td>
         <td> <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(2)"  </td>
      </tr>
       <tr data-id="3">
         <td> Child </td>
         <td> 2008-23-06 </td>
         <td> female </td>
         <td>  <input type="button" id ="deleteDep" value="Delete" onclick = "deleteRow(3)" </td>
      </tr>
   </table>

Upvotes: 2

Related Questions