Remove All Elements with the Same Class in Pure JavaScript

Question

I have a form that is being validated once the user clicks submit. If there is an error, a <span> tag with the class message is displayed above each input field that is empty. When the user makes the correction and clicks submit again, I want all the message classes to be removed that way I can validate the inputs again without having to worry about duplicating the error messages.

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]);
}

The error I am getting says TypeError: messages[i] is undefined

How can I query all the classes message and remove them?I have seen similar questions on here but none of them seem to answer what I am looking for.

Possible duplicate of [Remove all elements of a certain class with JavaScript](https://stackoverflow.com/questions/10842471/remove-all-elements-of-a-certain-class-with-javascript) — Heretic Monkey, Jun 04 '19 at 20:33
So it works; however I am receiving an error `TypeError: messages[i] is undefined` — tyguy, Jun 04 '19 at 20:38

score 4 · Answer 1 · answered Jun 04 '19 at 20:39

4

You simply have a typo in your for statement, replace 1 with i in the predicate

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

Also note, you could use messages[i].remove() for shorter syntax. (mdn)

answered Jun 04 '19 at 20:39

junvar

11,151
2
30
46

`.remove()` is not supported everywhere, so unfortunately the other way is actually the way to get it working everywhere – Chris Barr Jun 04 '19 at 20:41
In the future, rather than submitting an answer to solely correct typos, please leave a comment and vote to close. There's a specific "Vote To Close" option specifically for them: *"Off Topic > Simple Typographical Error"*. That way, OP gets their answer and their code is fixed, but future readers aren't digging through clutter to get to more meaningful and helpful posts! – Tyler Roper Jun 04 '19 at 20:42

score 3 · Accepted Answer · answered Jun 04 '19 at 20:39

You have for(var i = 0; 1 < messages.length; i++) but the 1 should be your variable named i instead. like this: for(var i = 0; i < messages.length; i++)

Right now your code reads "keep looping if the number 1 is less than the number of messages"

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>

Typos are common enough, and so unlikely to help others, that there is a specific close reason for them. Adding a comment is sufficient. — Heretic Monkey, Jun 04 '19 at 20:40
wow! I can't believed I missed that typo. So simple! Thank you — tyguy, Jun 04 '19 at 20:41
Good point, I wasn't aware that was the preferred way to deal with questions like this. Thanks! — Chris Barr, Jun 04 '19 at 20:42

jeppekaka · Answer 3 · 2019-06-04T20:52:50.920

3

I see an error in your foor loop. 1 < messages.length is probably always true. Replace 1 with i:

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

edited Jun 04 '19 at 20:52

answered Jun 04 '19 at 20:41

jeppekaka

52
4

korona · Answer 4 · 2019-06-04T20:38:58.687

0

If I'm understanding you right:

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

edited Jun 04 '19 at 20:38

answered Jun 04 '19 at 20:38

korona

2,308
1
22
37

1

OP doesn't want to remove the class from the node, but to remove the node itself from the DOM. – msanford Jun 04 '19 at 20:39

Remove All Elements with the Same Class in Pure JavaScript

HTML

JavaScript

4 Answers4