I was trying on button click delete the row from table in javascript.I am able to do so usig jquery, but is it possible to do using pure vanilla javascript.
Is there way to use click event and delete the row ?
$(".delete").click(function() {
$(this).closest("tr").remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Row 1</td>
<td><button class="delete">Del</button></td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="delete">Del</button></td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="delete">Del</button></td>
</tr>
</table>I added onClick for each button
function deleteRow(button) {
const tr = button.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}<table id="table">
<tr>
<td>Row 1</td>
<td><button onClick="deleteRow(this);" class="delete">Del</button></td>
</tr>
<tr>
<td>Row 2</td>
<td><button onClick="deleteRow(this);" class="delete">Del</button></td>
</tr>
<tr>
<td>Row 3</td>
<td><button onClick="deleteRow(this);" class="delete">Del</button></td>
</tr>
</table>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments