• Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • Tutorial Videos
  • Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • Tutorial Videos
  • #Deals
  • #News
  • #WiKi
  • #APPS
  • #Events
    • #WWDC
    • #I/O
    • #Ignite
  • #Let’s Talk

MyCodeTips mycodetips-newlogocopy1

  • Home
  • Troubleshoot
  • #Example
    • C
    • C++
    • Python
    • R-Programming
  • DSA
  • Quiz
  • Tutorial Videos
Programming

Add or Remove HTML classes in Jquery

Add or Remove HTML classes in Jquery

Adding new HTML class is a no-brainer

You can do this with jQuery. This example function below will add and remove my-new-class to the <div>.
// ## add class
$(‘div’).addClass(‘my-new-class’);

// ## remove class
$(‘div’).removeClass(‘my-new-class’);
We can also use standard JavaScript code to add/remove HTML classes like so:
// add class
document.getElementById(‘elem’).className = ‘my-new-class’;

// remove class
document.getElementById(‘elem’).className = document.getElementByTag(‘div’).className.replace( /(?:^|\s)my-new-class(?!\S)/g , ” )
The code as you can see above is less straightforward than when we are doing it with a JavaScript Framework jQuery. But if you don’t want to rely on a framework, you can always use a new JavaScript API called classList.

Recommended Reading: Obtaining User Location With HTML5 Geolocation API

Using ClassList API
Similar to jQuery, classList provides a set of methods that allow us to modify HTML classes.

In a case where there is a div with multiple classes, we can retrieve the classes that are assigned in the div using classList.
var classes = document.getElementByID(‘elem’).classList;
console.log(classes);
When we open the browser Console, we can see the list of the classes.

 

To add and remove class, we can use .add() and .remove().
var elem = document.getElementByID(‘elem’);

// add class
elem.classList.add(‘my-new-class’);

// remove class
elem.classList.remove(‘my-new-class’);
Adding multiple classes can also be done by separating each class with a comma:
elem.classList.add(‘my-new-class’, ‘my-other-class’);
To check whether certain elements contain the specified class, we can use .contains(). It will return true if the class specified is present, and return false if it does not.
elem.classList.contains(‘class-name’);
We can also toggle the class using .toggle(). The following code snippet shows how we bind the .toggle()method with a mouse click event.
var button = document.getElementById(‘button’);
function toggle() {
elem.classList.toggle(‘bg’);
}
button.addEventListener(‘click’, toggle, false);
Check out the demo in action from the following links.

  • Click to share on Reddit (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
Written by Ranjan - 1163 Views
AUTHOR
Ranjan

I m Ranjan and Sharing my years of experience in Software Development. Love to code in Mobile apps (IOS, Android, Power Apps, Xamarin, Flutter), Machine Learning ( Beginner ), Dot Net, Databases ( SQL Server, MySql, SQLite), WordPress, Cloud Computing ( AWS, Azure, Google, MongoDB) and many more as required on project-specific. Besides this love to travel and cook.

Next Post
Previous Post

Subscribe for updates

Join 6,916 other subscribers

whiteboard

Whiteboard(PRO)

whiteboard

Whiteboard(lite)

alphabets

Kids Alphabet

techlynk

Techlynk

techbyte

Do2Day

techbyte

Techbyte

Latest Posts

  • YT-Featured-Algorithm
    What is Algorithm?
  • Frameworks of IOS
    Frameworks of IOS – Part ( I )
  • NSFileManager or NSPathUtilities
    NSFileManager or NSPathUtilities in Objective-C
  • Passing data between view controllers in Objective-C
    Passing data between view controllers in Objective-C
  • structures-classes-enum
    Structures and Classes in swift !
  • control-system-swift
    Control Flow in Swift
  • swift-concurrency-await
    Concurrency in Swift
  • time-complexity-dsa
    The Term Time Complexity in DSA
  • objective-c-datatypes1
    Objective-C Data Types
  • Convert-jpeg-word
    Convert JPG to Word – Tips You Should Try!

Quick Links

  • #about
  • #myapps
  • #contact
  • #privacy

Other Websites

  • #myQuestions
  • #myBhojanalaya
  • #gadgetFacts
  • #ifscCodesDB

Tag Cloud

Algorithm Android Android Studio API APP Programming Apps blogging Browser Config CSS DATABASE dsa ecommerce error Features Google IO HTML HTML5 IDE installation Interview Questions IOS iPhone javascript Mac objective-c OneDrive OS Placeholder Programming quicktips SDK SEO Settings SMO SQL swift swiftUI Teams Tips & Tricks Tools UI Web Wordpress Xcode

©mycodetips.com