Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Bootstrap Modal hiding automatically
Removing element/s from BootStrap modal using ".remove", ".empty" or $("element").innerHTML = "", causes the modal to close automatically is there a fix?
to reproduce
<table class="table">
<thead>
<tr>
<th>Field Name</th>
<th>Field Type</th>
<th></th>
</tr>
</thead>
<tbody id="editFields">
<tr id="defaultRow">
<td>
<input type="text" class="form-control default" name="editNames[]" value="Amount" id="default" disabled>
<div class="text-muted fs-7">This is a default field and cannot be changed.</div>
</td>
<td>
<select name="editTypes[]" id="defaultSelect" class="form-select" disabled>
<option value="0" selected>Number</option>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>modal.find(".table").on("click", ".btn-danger", function() {
$(this).closest("tr").remove();
});
Replies (3)
Hi,
The modal is closed due to the button click. Try to use Event stopPropagation
modal.find(".table").on("click", ".btn-danger", function(e) {
e.stopPropagation();
$(this).closest("tr").remove();
});Regards.
Hi, Sean,
Thanks for the fast reply. It worked like a charm!
Glad to hear that 
All the best with your project.
Your Support Matters!
We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
