The code snippet below shows the structure of my webpage :
HTML :
<button class="add-col"><i class="fas fa-columns"> Add a column</i></button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>
<button class="btn"><i class="fas fa-trash remove-col"></i></button>
<button class="btn"><i class="fas fa-text-height text-col"></i></button>
<button class="btn"><i class="fas fa-sort-numeric-down nbr-col"></i></button>
<input type="text" class="form-control">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn"><i class="fas fa-trash remove-row"></i></button>
</td>
<td>
<input type="text" class="form-control">
</td>
</tr>
</tbody>
</table>
</div>
<button class="add-row"><i class="fas fa-list-ul"> Add a row</i></button>
Javascript :
$('body').on('click', '.remove-row', function() {
$(this).parents('tr').remove();
});
(Every button in the grid triggers a page refresh, the code snippet for 'remove-row' is provided for clarity)
(The issue is within the second tab, fill in details in the first tab to access the second tab)
Whenever a button in the grid is clicked, the page refreshes
Research suggests adding "return false" or "e.preventDefault();" to resolve the issue, but it only partially fixes it
Applying these at the end of each .on('click') resolves the issue for adding a column or a row, but deleting a row or column might work momentarily before the page refreshes again, affecting the other buttons as well.
Appreciate any assistance in resolving this issue! :)
// Your custom code goes here