I am creating dynamic span tags to display error message beneath form fields. Before each scan for errors I want to clear the old error spans but, somehow, the presence of an "alert" statement anywhere in the clear function delays the remove action. Can anyone explain or help me override this behavior? Below is a very simple demo:
<html>
<style>
.errorContainer {
color: red;
display: block;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function DisplayErrors() {
var es = document.createElement("SPAN");
es.className = "errorContainer";
es.textContent = "First Name is required.";
document.getElementById("firstName").after(es);
var es = document.createElement("SPAN");
es.className = "errorContainer";
es.textContent = "Last Name is required.";
document.getElementById("lastName").after(es);
}
function RemoveErrors() {
$(".errorContainer").remove();
alert("hold");
}
</script>
<body>
<table>
<tr>
<td>First Name: </td>
<td><input id="firstName" name="firstName" type="text" maxlength="20"></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input id="lastName" name="lastName" type="text" maxlength="20"></td>
</tr>
</table>
<input type="button" onclick="DisplayErrors();" value="Display Errors">
<input type="button" onclick="RemoveErrors();" value="Remove Errors">
</body>
</html>The DOM may update asynchronously (i.e. the remove call). alert blocks the event loop so the removal might not happen right away. You could wrap your alert in a setTimeout to fire on a future turn of the event loop.
setTimeout(() => alert('hold'), 0);
You can use setTimeout to force the alert to execute only once you've removed the error messages:
<html>
<style>
.errorContainer {
color: red;
display: block;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function DisplayErrors() {
var es = document.createElement("SPAN");
es.className = "errorContainer";
es.textContent = "First Name is required.";
document.getElementById("firstName").after(es);
var es = document.createElement("SPAN");
es.className = "errorContainer";
es.textContent = "Last Name is required.";
document.getElementById("lastName").after(es);
}
function RemoveErrors() {
$(".errorContainer").remove();
setTimeout(() => alert("hold"), 0)
}
</script>
<body>
<table>
<tr>
<td>First Name: </td>
<td><input id="firstName" name="firstName" type="text" maxlength="20"></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input id="lastName" name="lastName" type="text" maxlength="20"></td>
</tr>
</table>
<input type="button" onclick="DisplayErrors();" value="Display Errors">
<input type="button" onclick="RemoveErrors();" value="Remove Errors">
</body>
</html>function RemoveErrors() {
$(".errorContainer").remove();
setTimeout(alert("hold"), 100);
}
I think that the delay has to have 100 ms at least because the alert needs to be appeared after removal of element in sight. UI effect is important in web :) and it's because jquery remove function would have some delay by asynchronous behavior.