removing a style by class

Question

How can I delete two items at once?
I need to delete them by class. But I don't understand how to he -> display: flex me -> text-align: left;

I tried the code below but it didn't work.

 document.getElementsByClassName('he')[0].style.color = null;

.he {
  color: rgb(0, 162, 255);
    display: flex;
}
.he .me {
  text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
  <div class="he" id="test">
    <div class="me">
    <h1>hey</h1>
    </div>
  </div>
  </body>
</html>

If you're trying to delete the styles attached to `he` you could just opt to delete the class name by doing `getElementByClassName('he')[0].classList.remove('he')` — Nikster, Feb 20 '23 at 02:17

score 0 · Answer 1 · answered Feb 20 '23 at 02:10

Alternative A:

Create another class with for example .unsetColor { color: auto } and then add the class.

for (const el of document.getElementsByClassName('he'))
  el.classList.add('unsetColor')

Alternative B:

for (const el of document.getElementsByClassName('he'))
  el.style.color = 'auto'

Otherwise, see this answer https://stackoverflow.com/a/6620400/529725 which is inline with how you coding it.

removing a style by class

1 Answers1