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)
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.
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.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
