delete row in table from firestore database

Question

I am trying to create a button to delete a row in my table from the firebase database but I am not sure how to choose one specific row to delete using a button function. I am using javascript and firesource.

The function that i am using to fill my table is

function filled_table_start(num){



document.getElementById("tbody1").innerHTML = "";

members.forEach((member) => {
if(member.exists()){
  
row += '<tr id="student'+ (count+1) +'" >';
row += '<td>' + (count+1) +'</td>';
row += '<td>' + member.data().studentID + '</td>';
row += '<td>' + member.data().name + '</td>';
row += '<td>' + member.data().gender + '</td>';
row += '<td>' + member.data().schoolEmailAdd + '</td>';
row += '<td>' + member.data().handphoneNum + '</td>';

row += '<td><button type="button" onclick= "' + deleteDoc(doc(db,this.studentID ))+'" >Delete User</td>';
//row += '<td>' + 

row += '</tr>';

document.getElementById('tbody1').innerHTML += row;
count ++;

};
});
}

I am wondering if something like this.deleteDoc will work? or is there another function that can be used to delete a specific row?

Answer 1

I just created a dummy demo table here. What I did is, simply give a class to each of the buttons, when you will click on the button, It will find the closest tr and remove it.

 $("#tbody1").on('click', '.deleteDoc', function () { $(this).closest('tr').remove(); });

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="tbody1"> <tr> <th>Sl</th> <th>ID</th> <th>Name</th> <th>Gender</th> <th>Mail</th> <th>Mobile</th> <th>Action</th> </tr> <tr id="student1"> <td>1</td> <td>11</td> <td>ABC</td> <td>F</td> <td>abc@gmail.com</td> <td>123456</td> <td><button type="button" class="deleteDoc"> Delete User </td> </tr> <tr id="student2"> <td>2</td> <td>12</td> <td>DEF</td> <td>M</td> <td>def@gmail.com</td> <td>123456</td> <td><button type="button" class="deleteDoc"> Delete User </td> </tr> <tr id="student3"> <td>3</td> <td>13</td> <td>IJK</td> <td>F</td> <td>ijk@gmail.com</td> <td>123456</td> <td><button type="button" class="deleteDoc"> Delete User </td> </tr> </tbody> </table>