I'm working with an HTML table that contains a delete button in each row's last column. When the button is clicked, I want to delete the entire row. However, my current code only deletes the button itself and not the entire row:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
this.parentNode.parentNode.removeChild(this);
});
}
This is how my HTML structure looks like:
<body>
<table class="table">
<thead>
<tr>
<th>Students</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="771d181f1937131812590204">[email protected]</a></td>
<td><button>X</button></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6bcb9beb896b2b9b3f8a3a5">[email protected]</a></td>
<td><button>X</button></td>
</tr>
</tbody>
</table>