Remove CSS class from element with JavaScript (no jQuery) [duplicate]

by

The right and standard way to do it is using classList. It is now widely supported in the latest version of most modern browsers:

ELEMENT.classList.remove("CLASS_NAME");


remove.onclick = () => {
  const el = document.querySelector('#el');
  if (el.classList.contains("red")) {
    el.classList.remove("red");

  }
}
.red {
  background: red
}
<div id='el' class="red"> Test</div>
<button id='remove'>Remove Class</button>

Documentation: https://developer.mozilla.org/en/DOM/element.classList

More Related Contents:

  1. How to have html popup appear over main html page?
  2. How to create a translucent in React Native?
  3. Write tags in HTML and print
  4. How to disable HTML links
  5. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  6. Refresh/reload the content in Div using jquery/ajax
  7. Keep overflow div scrolled to bottom unless user scrolls up
  8. How to make HTML element resizable using pure Javascript?
  9. Show and hide divs at a specific time interval using jQuery
  10. How do I detect “shift+enter” and generate a new line in Textarea?
  11. offsetting an html anchor to adjust for fixed header [duplicate]
  12. Bootstrap 4 Dropdown Menu not working?
  13. AngularJS: Better way to watch for height change
  14. Dashed border animation in css3 animation
  15. How to partition input field to appear as separate input fields on screen?
  16. :touch CSS pseudo-class or something similar?
  17. Open a new javascript window(.open) along with its CSS styling
  18. option.style.display = “none” not working in safari [duplicate]
  19. CSS: Change parent on focus of child
  20. Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?
  21. Check if element is between 30% and 60% of the viewport
  22. How to vertically align all text in CSS?
  23. Fade background image in and out with jQuery?
  24. DIV Vertical Scroll bar on left
  25. How do I detect the inherited background-color of an element using jQuery/JS?
  26. CSS /JS to prevent dragging of ghost image?
  27. Google’s Imageless Buttons
  28. Detect if dropdown navigation would go off screen and reposition it
  29. How to apply background-color to a selected option?
  30. Get All Elements in an HTML document with a specific CSS Class

Leave a Comment