Dolf,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.remove_button:after {
content: "del ";
color: #FF0000;
}
</style>
<script>
let removedItems = [];
document.addEventListener( "click" , ({target}) => {
let elem;
if(elem = target.closest(".remove_button")) {
let {rowIndex} = tr = elem.parentNode;
let table = tr.closest(".table")
tr.remove();
removedItems.push({tr, rowIndex, table})
}
if(elem = target.closest(".undo") && removedItems.length) {
let {rowIndex, tr, table} = removedItems.pop();
table.insertRow(rowIndex).replaceWith(tr);
}
});
</script>
</head>
<body>
<table class="table" id="ex3">
<tbody>
<tr>
<th></th>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th class="nosort">header</th>
</tr>
<tr>
<td class="remove_button"></td>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td class="remove_button"></td>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td class="remove_button"></td>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td class="remove_button"></td>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</tbody>
</table>
<button class="undo">undo</button>
</body>
</html>