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