Question

用户单击提交后，我有一个正在验证的表单。如果有错误，则在每个空白输入字段上方显示一个<span>类的message标记。当用户进行更正并再次单击提交时，我希望删除所有message类，这样我可以再次验证输入，而不必担心重复错误消息。

HTML


<div class="row">
  <div class="column is-6--tablet">
    <h2>Personal Information</h2>
    <div class="row">
      <div class="column is-3">
        <span class="message">Please enter your first name.</span>
        <label for="xFIRST_NAME">First Name</label>
      </div>
      <div class="column is-9">
        <input type="text" name="xFIRST_NAME" value="<?php echo $xFIRST_NAME; ?>" required>
      </div>
    </div>
    <div class="row">
      <div class="column is-3">
        <span class="message">Please enter your last name.</span>
        <label for="xLAST_NAME">Last Name</label>
      </div>
      <div class="column is-9">
        <input type="text" name="xLAST_NAME" value="<?php echo $xLAST_NAME; ?>" required>
      </div>
    </div>
    <div class="row">
      <div class="column is-3">
       <span class="message">Please enter your phone.</span>
        <label for="XPHONE">Phone</label>
      </div>
      <div class="column is-9">
        <input type="tel" name="xPHONE" value="<?php echo $xPHONE; ?>" required>
      </div>
    </div>
    <div class="row">
      <div class="column is-3">
        <label for="xEMAIL">Email</label>
      </div>
      <div class="column is-9">
        <input type="email" name="xEMAIL" value="<?php echo $xEMAIL; ?>" required>
      </div>
    </div>
    <div class="row patient-type">
      <div class="column is-12">
        <hr>
        <input type="radio" name="xPATIENT_STATUS" id="NEW_PATIENT" value="New Patient" <?php echo ($xPATIENT_STATUS === 'New Patient' ? 'checked' : ''); ?> required>
        <label for="NEW_PATIENT">&nbsp;New Patient</label>
        <input type="radio" name="xPATIENT_STATUS" id="EXISTING_PATIENT" value="Existing Patient" <?php echo ($xPATIENT_STATUS === 'Existing Patient' ? 'checked' : ''); ?>>
        <label for="EXISTING_PATIENT">&nbsp;Existing Patient</label>
      </div>
    </div>
  </div>
</div>

JavaScript

var messages = document.querySelectorAll('.message');
for(var i = 0; 1 < messages.length; i++)
{
  messages[i].parentNode.removeChild(messages[i]);
}

我得到的错误是TypeError: messages[i] is undefined

如何查询所有message类并删除它们？我在这里看到了类似的问题，但是似乎都没有一个答案。

Answer 1

您的for语句中只包含一个错字，将谓词中的1替换为i

var messages = document.querySelectorAll('.message');
for(var i = 0; i < messages.length; i++) {
  messages[i].parentNode.removeChild(messages[i]);
}

还请注意，您可以使用messages[i].remove()来缩短语法。（mdn）

Answer 2

您有for(var i = 0; 1 < messages.length; i++)，但是1应该是名为i的变量。像这样：for(var i = 0; i < messages.length; i++)

现在您的代码显示为“如果数字1小于消息数，请保持循环”

var messages = document.querySelectorAll('.message');
for(var i = 0; i < messages.length; i++)
{
  messages[i].parentNode.removeChild(messages[i]);
}

<div class="row">
  <div class="column is-6--tablet">
    <h2>Personal Information</h2>
    <div class="row">
      <div class="column is-3">
        <span class="message">Please enter your first name.</span>
        <label for="xFIRST_NAME">First Name</label>
      </div>
      <div class="column is-9">
        <input type="text" name="xFIRST_NAME" value="<?php echo $xFIRST_NAME; ?>" required>
      </div>
    </div>
    <div class="row">
      <div class="column is-3">
        <span class="message">Please enter your last name.</span>
        <label for="xLAST_NAME">Last Name</label>
      </div>
      <div class="column is-9">
        <input type="text" name="xLAST_NAME" value="<?php echo $xLAST_NAME; ?>" required>
      </div>
    </div>
    <div class="row">
      <div class="column is-3">
       <span class="message">Please enter your phone.</span>
        <label for="XPHONE">Phone</label>
      </div>
      <div class="column is-9">
        <input type="tel" name="xPHONE" value="<?php echo $xPHONE; ?>" required>
      </div>
    </div>
    <div class="row">
      <div class="column is-3">
        <label for="xEMAIL">Email</label>
      </div>
      <div class="column is-9">
        <input type="email" name="xEMAIL" value="<?php echo $xEMAIL; ?>" required>
      </div>
    </div>
    <div class="row patient-type">
      <div class="column is-12">
        <hr>
        <input type="radio" name="xPATIENT_STATUS" id="NEW_PATIENT" value="New Patient" <?php echo ($xPATIENT_STATUS === 'New Patient' ? 'checked' : ''); ?> required>
        <label for="NEW_PATIENT">&nbsp;New Patient</label>
        <input type="radio" name="xPATIENT_STATUS" id="EXISTING_PATIENT" value="Existing Patient" <?php echo ($xPATIENT_STATUS === 'Existing Patient' ? 'checked' : ''); ?>>
        <label for="EXISTING_PATIENT">&nbsp;Existing Patient</label>
      </div>
    </div>
  </div>
</div>

Answer 3

我在您的foor循环中看到一个错误。 1 < messages.length可能总是正确的。将1替换为i：

for(var i = 0; i < messages.length; i++)
{
  messages[i].parentNode.removeChild(messages[i]);
}

Answer 4

如果我理解正确，那么

var messages = document.querySelectorAll('.message');
for(var i = 0; 1 < messages.length; i++)
{
  messages[i].classList.remove('message');
}

在纯JavaScript中删除具有相同类的所有元素

HTML

JavaScript

4 个答案: