Javascript 警报消息不'；第一次单击“关闭”按钮后不会显示

当我按x键时，警告按钮（表单输入错误数据）将消失错误消息。下次当用户检查表单的数据时，如果再次出错，则在按钮关闭x一次后，不会显示警告消息。关于如何修复它有什么想法吗

这是警报消息和“关闭x”按钮的代码

HTML

---

之所以会发生这种情况，是因为Disclease alert正在从dom中删除alert box元素，所以这里有一个小技巧，您可以使用它来实现所需的功能，只需从alert中删除数据Disclease并使用自定义行代码隐藏它，然后

函数checkDataUserAccount（）{
常量警报=document.querySelector（#lessData”）；
const age=document.querySelector（“年龄”）；
const email=document.querySelector（“电子邮件”）；
常数reg=/^（[A-Za-z0-9\-\.]）+\@（[A-Za-z0-9\-\.]）+\.（[A-Za-z]{2,4}）$/；
让flag=false；
if（age.value.length==0 | |！age.value.trim（））{
flag=true；
age.style.borderColor=“红色”；
}否则{
age.style.borderColor=“”；
}
如果（email.value.length==0 | |！email.value.trim（））{
flag=true；
}
如果（！email.value.match（reg））{
email.style.borderColor=“红色”；
flag=true；
}否则{
email.style.borderColor=“”；
}
如果（标志===真）{
alert.classList.add（“show”）；
返回false；
}否则{
alert.classList.remove（“show”）；
返回true；
}
}
$（'#按钮1'）。单击（函数（）{
checkDataUserAccount（）；
});
$（'.close'）。单击（函数（）{
$（this）.parent（'#lessData'）.removeClass（'show'）；
});
.row{
背景#f8f9fa；
边缘顶部：20px；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}
#莱斯达塔{
显示：无；
}
#莱斯达塔秀{
显示：块；
}

错了请填写所有必需的数据。
x
年龄*
性别*
男性
女性
电子邮件（用户名）*
继续创建您的密钥
Hello Antira，欢迎访问SO，您需要发布完整的代码，一个可编写的代码片段会更好，否则只需JS或jquery，就很容易知道错误在哪里。因此，发布完整的代码或创建一个可行的代码片段。请发布表单的其余部分、css和javascript@RachelGallen我上传html和jscode@Atul我上传html js代码如果我有3个不同的警报，js代码如何更改为突出警报将关闭？我正在谈论此部分（$（'.close'）。如果警报具有不同的ID，请单击（function（）{$（this）.parent（'#lessData'）.removeClass（'show'）；}）；）s@AntriaPanayiotou答案旁边有箭头（上下）。要向上投票，请单击“向上”箭头。因此，您会询问是否有3个不同的警报询问3个不同的事项。你可以用两种方法
 <div
        class="alert alert-danger alert-dismissible fade show hidden"
        role="alert"
        id="lessData"
      >
        <strong>Wrong! </strong> Please fill all the required data.
        <button
          type="button"
          class="close"
          data-dismiss="alert"
          aria-label="Close"
        >
          x
        </button>
      </div>

 <form id="formRegistration">
        <div class="form-group row">
          <label for="Age" class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Age <span class="red">*</span></label
          >
          <div class="col-sm-9 col-lg-9 col-md-9">
            <input
              type="number"
              class="form-control"
              id="Age"
              placeholder="Please enter your age"
            />
          </div>
        </div>
        <div class="form-group row">
          <label for="Gender" class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Gender <span class="red">*</span>
          </label>
          <div class="col-sm-9 col-lg-9 col-md-9" style="display: inline;">
            <select id="Gender" class="form-control">
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label
            for="staticEmail"
            class="col-md-3 col-lg-3 col-md-3 col-form-label"
            >Email (Username) <span class="red">*</span></label
          >
          <div class="col-sm-9 col-lg-9 col-md-9">
            <input
              type="email"
              class="form-control"
              id="Email"
              placeholder="Please enter your email"
            />
          </div>
        </div>
        <div class="form-group row">
          <label
            for="button"
            class="col-md-3 col-lg-3 col-md-3 col-form-label"
          ></label>
          <div class="col-sm-9 col-lg-9 col-md-9">
            <button type="button" class="btn btn-secondary" id="button1">
              Continue to create your secret key
            </button>
          </div>
        </div>
      </form>

function checkDataUserAccount() {
const alert = document.querySelector("#lessData");
const age = document.querySelector("#Age");
const email = document.querySelector("#Email");
  const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  let flag = false;
  if (age.value.length === 0 || !age.value.trim()) {
    flag = true;
    age.style.borderColor = "red";
  } else {
    age.style.borderColor = "";
  }

  if (email.value.length === 0 || !email.value.trim()) {
    flag = true;
  }

  if (!email.value.match(reg)) {
    email.style.borderColor = "red";
    flag = true;
  } else {
    email.style.borderColor = "";
  }
  if (flag === true) {
    alert.classList.remove("hidden");
    return false;
  } else {
    alert.classList.add("hidden");
    return true;
  }
}