As @gaurang171 mentioned, we can use .closest() which will return the first ancestor, or the closest to our delete button, and use .remove() to remove it.
This is how we can implement it using jQuery click event instead of using JavaScript onclick.
HTML:
<table id="myTable">
<tr>
<th width="30%" style="color:red;">ID</th>
<th width="25%" style="color:red;">Name</th>
<th width="25%" style="color:red;">Age</th>
<th width="1%"></th>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-001</td>
<td width="25%" style="color:red;">Ben</td>
<td width="25%" style="color:red;">25</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-002</td>
<td width="25%" style="color:red;">Anderson</td>
<td width="25%" style="color:red;">47</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-003</td>
<td width="25%" style="color:red;">Rocky</td>
<td width="25%" style="color:red;">32</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td width="30%" style="color:red;">SSS-004</td>
<td width="25%" style="color:red;">Lee</td>
<td width="25%" style="color:red;">15</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
jQuery
$(document).ready(function(){
$("#myTable").on('click','.btnDelete',function(){
$(this).closest('tr').remove();
});
});
Try in JSFiddle: click here.