remove class jquery

Today, We want to share with you remove class jquery.In this post we will show you javascript removeclass from div, hear for addclass jquery we will give you demo and example for implement.In this post, we will learn about
Dynamically addClass CSS click using jQuery
with an example.

remove all class jquery

jQuery removeClass Method

Example 1:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo example</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js">
 </script>
<script type="text/javascript">
         $(document).ready(function(){ 
           $( "#removeClassExample" ).on( "click", function(event) {             
                $("#removeClass").removeClass('myClass');               
              });  
          });
</script>
<style>
div{
margin:10px;
min-height:50px;
min-width:100%;
border:1px solid blue;
float:left;

}
.myClass{
border:1px solid red;
background:green;
}
</style>

</head>	
<body>
<h4 ><a href="javascript:void(0);" id="removeClassExample">Click to run .removeClass() Example </a></h4> 

<div id="removeClass" class="myClass">
To replace all existing classes with another class, we can use . attr( "class", "newClass" ) instead.
</div>

</body>
</html>

removeclass javascript

Example 2:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeClass("mainpaka");
  });
});
</script>
<style>
.mainpaka {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h2>This is a heading</h2>

<p class="mainpaka">What happens is that your close button is placed inside your .clickable div, so the click event will be triggered in both elements.</p>
<p class="mainpaka">jQuery removeClass() Method The removeClass() method removes one or more class names from the selected elements. </p>

<button>Remove the "mainpaka" class from all p elements</button>

</body>
</html>


jQuery Add and Remove CSS Classes

Example 3: jQuery addClass() Method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adding a Class to the Elements in jQuery</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }
	.hint{
        font-style: italic;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h2").addClass("page-header");
        $("p.hint").addClass("highlight");
    });
});
</script>
</head>
<body>
    <h2>Welcome to pakainfo</h2>
    <p>Pakainfo helps build web applications,tutorials,programming,examples,source code,demos,tips.It is an educational blog for learning web technologies online.</p>
    <p class="hint"><strong>Tip:</strong> jQuery, Google Analytics, PHP, WordPress, and Google Fonts are some of the popular tools that Pakainfo.com uses.</p>
    <button type="button">Add Class</button>
</body>
</html>

jQuery removeClass() Method

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Removing Classes from the Elements in jQuery</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: green;
    }
	.hint{
        font-style: italic;
    } 
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h2").removeClass("page-header");
        $("p").removeClass("hint highlight");
    });
});
</script>
</head>
<body>
    <h2 class="page-header">Demo Text</h2>
    <p>The datepicker is tied to a standard form input field. </p>
    <p class="hint highlight"><strong>Tip:</strong>The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. </p>
    <button type="button">Remove Class</button>
</body>
</html>

I hope you get an idea about remove class jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  JavaScript Dynamic Input Form Example

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery toggleClass addClass removeClass Examples
  2. Read Also:  How to Create a Currency Converter using Pipe with Angularjs?
  3. Read Also:  jQuery Dynamically addClass and removeClass
  4. Read Also:  Dynamically addClass CSS click using jQuery
  5. Read Also:  Facebook Graph API Search Multiple Parameters Queries
  6. Read Also:  Selectize clear selection on Dropdown Click
  7. Read Also:  remove class jquery
  8. Read Also:  Custom Fancy Custom Scrollbar styling using CSS and Jquery
  9. Read Also:  jQuery Ajax File Upload with Progress Bar
  10. Read Also:  How to Create Captcha code using JavaScript?
CLOSEX