如何在JavaScript中同时使用行ID和表ID删除表行？

Question

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

Answer 1

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>