关闭Alert弹窗后如何重置Div使其在条件满足时重新显示？

问题根源：你的代码通过后端@if语句在页面初始渲染时生成提示框，点击关闭时用JS直接设置display='none'隐藏了元素，但该元素仍存在于DOM中。当再次触发错误条件时，若没有刷新页面，后端不会重新执行@if生成新的提示框，而原提示框还是处于隐藏状态，所以无法重新显示。

以下是几种可行的解决方案：

方案1：用CSS类控制显示/隐藏（推荐） #

这种方式通过添加/移除CSS类来控制提示框的显示状态，便于后续重新触发显示：

1. 先定义隐藏类的CSS：

.alert-hidden {
    display: none;
}

2. 修改HTML代码，初始时根据后端条件渲染提示框，关闭按钮改为添加隐藏类：

@if (condition == true)
{
    <div class="alert" >
         <span class="closebtn" onclick="this.parentElement.classList.add('alert-hidden');">×</span>
        <strong>Error!</strong> An error has been identified
    </div>
}

3. 当再次满足错误条件时（比如前端验证触发），执行JS移除隐藏类：

// 找到提示框元素并重新显示
const alertBox = document.querySelector('.alert');
if (alertBox) {
    alertBox.classList.remove('alert-hidden');
}

方案2：始终渲染提示框，初始状态由后端控制 #

如果需要后端完全控制初始显示状态，同时支持前端动态切换，可以让后端始终渲染提示框，初始时根据条件添加隐藏类：

<div class="alert @(condition == true ? '' : 'alert-hidden')">
     <span class="closebtn" onclick="this.parentElement.classList.add('alert-hidden');">×</span>
    <strong>Error!</strong> An error has been identified
</div>

后续触发条件时，同样用方案1中的JS代码移除alert-hidden类即可。

方案3：关闭时移除元素，刷新页面重新渲染（仅适用于页面刷新场景） #

如果你的场景是每次触发条件都会刷新页面，那么可以修改关闭逻辑为移除元素：

@if (condition == true)
{
    <div class="alert" >
         <span class="closebtn" onclick="this.parentElement.remove();">×</span>
        <strong>Error!</strong> An error has been identified
    </div>
}

这种方式下，页面刷新且条件满足时，后端会重新生成提示框。但如果是无刷新场景，该方案不适用。

内容的提问来源于stack exchange，提问作者Lisa