CODEWITHSUNDEEP
javascriptjquery
Abhay
Abhay

Reputation: 413

Remove div class on page loading

I have a div

<div id="commonConsultationPopup" class="overlayPopup"></div>

I want to remove class on page loading.

I have tried:

$(document).ready(function() {
$("#commonConsultationPopup").removeClass("overlayPopup");
});

But its not working.

Upvotes: 1

Views: 7450

Answers (6)

Warship
Warship

Reputation: 36

Try this:

$(document).ready(function() {
    $("#commonConsultationPopup").removeClass();
});

But it will remove all the classes from the the given div.

Upvotes: 2

Sabir Hussain
Sabir Hussain

Reputation: 2922

Your JS seems perfect, just check two things

  1. jQuery is loaded.
  2. replace "$" with "jQuery" Specially when you are working in WordPress.

HTML

<div id="commonConsultationPopup" class="overlayPopup">test</div>

JS

jQuery(document).ready(function() {
    jQuery("#commonConsultationPopup").removeClass("overlayPopup");
});

Check This Working CODEPEN

Upvotes: 0

Firefog
Firefog

Reputation: 3174

The Code 100% work See a Demo here if its not work the color should red . but it not that mean the class removed. You can also inspect you code to see the code by pressing F12.

$(document).ready(function() {
  $('#commonConsultationPopup').removeClass('overlayPopup');
});
.overlayPopup{
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="commonConsultationPopup" class="overlayPopup"> The class removed </div>

Upvotes: 0

user5870134
user5870134

Reputation:

To remove a class on document ready use this JS:

jQuery(document).ready(function() {
  $("#commonConsultationPopup").removeClass("overlayPopup");
});

To remove a class from a element on window load use this instead:

jQuery(window).load(function() {
  $("#commonConsultationPopup").removeClass("overlayPopup");
});

Here is the complete code:

<!DOCTYPE html>
<html>
<head>
  <title>Remove class example</title>
  <!-- We are using jQuery 3.1.0 -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <!-- You can also use jQuery 12.1.4 like this -->
  <!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> -->
</head>
<body>
  <div class="overlayPopup" id="commonConsultationPopup"></div>
  <script type="text/javascript">
    // Use this if you want to wait for the page to be ready:
    jQuery(document).ready(function($) {
      $("#commonConsultationPopup").removeClass("overlayPopup");
    });
    // Use this instead if you want to wait for the page to load:
    // jQuery(window).load(function() {
    //   $("#commonConsultationPopup").removeClass("overlayPopup");
    // });
  </script>
</body>
</html>

Good luck and all the best.

Upvotes: 1

Quynh Nguyen
Quynh Nguyen

Reputation: 3009

Try this code

<html>
   <head>
      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#commonConsultationPopup").removeClass("overlayPopup");
         });
      </script>
   </head>
   <body>
      <div id="commonConsultationPopup" class="overlayPopup"></div>
   </body>
</html>

And result

enter image description here

Don't view source. View content by Firebug or something similar.

Upvotes: 0

David Hoelzer
David Hoelzer

Reputation: 16379

I don't believe that this function does what you think that it does. From the manual:

removeclass(className)

Type: String

One or more space-separated classes to be removed from the class attribute >of each matched element.

Please notice that the manual says that it will remove the class from the class attribute. It does not state that it will remove the entire element.

If you wish to remove the entire div, you want the .remove() function. To use this, use a finder to locate the div (possibly by class name?) and then call remove() on it.

Upvotes: 1

Related Questions