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 — Heretic Monkey
– Heretic Monkey, Commented Jun 4, 2019 at 20:33
So it works; however I am receiving an error TypeError: messages[i] is undefined — tyguy
– tyguy, Commented Jun 4, 2019 at 20:38

junvar · Accepted Answer · 2019-06-04 20:39:58Z

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 4, 2019 at 20:39

junvar

11.6k2 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Barr Over a year ago

.remove() is not supported everywhere, so unfortunately the other way is actually the way to get it working everywhere

Tyler Roper Over a year ago

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!

Chris Barr · Accepted Answer · 2019-06-04 20:39:16Z

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.
wow! I can't believed I missed that typo. So simple! Thank you
Good point, I wasn't aware that was the preferred way to deal with questions like this. Thanks!

jeppekaka · Accepted Answer · 2019-06-04 20:52:50Z

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 4, 2019 at 20:52

answered Jun 4, 2019 at 20:41

jeppekaka

524 bronze badges

Comments

korona · Accepted Answer · 2019-06-04 20:38:58Z

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 4, 2019 at 20:38

answered Jun 4, 2019 at 20:38

korona

2,2501 gold badge22 silver badges38 bronze badges

1 Comment

msanford Over a year ago

OP doesn't want to remove the class from the node, but to remove the node itself from the DOM.

Collectives™ on Stack Overflow

Remove All Elements with the Same Class in Pure JavaScript

HTML

JavaScript

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JavaScript

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Linked

Related