javascript - Remove div class on page loading

I have a div

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

I want to remove class on page loading.

I have tried:

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

But its not working.

I have a div

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

I want to remove class on page loading.

I have tried:

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

But its not working.

Share Improve this question asked Jul 16, 2016 at 18:26 Abhay 4133 silver badges13 bronze badges

Is jQuery lib loaded ? – Louys Patrice Bessette Commented Jul 16, 2016 at 18:30
1 Any errors in console ? – Louys Patrice Bessette Commented Jul 16, 2016 at 18:38
There is no error on browser console. – Abhay Commented Jul 16, 2016 at 18:41
2 If jQuery is loaded, and there are no errors the next step is to try: console.log($("#monConsultationPopup").length) and if that logs 1 (as it should, if the element exists on the page on document ready), try console.log($("#monConsultationPopup.overlayPopup").length) to see if the given element really has that specific class. – David Thomas Commented Jul 16, 2016 at 18:45
@Abhay Are you in wordpress ? – Firefog Commented Jul 16, 2016 at 18:53

| Show 2 more ments

6 Answers 6

Sorted by: Reset to default 2

Try this:

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

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

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.

To remove a class on document ready use this JS:

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

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

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

Here is the plete 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./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./jquery-1.12.4.min.js"></script> -->
</head>
<body>
  <div class="overlayPopup" id="monConsultationPopup"></div>
  <script type="text/javascript">
    // Use this if you want to wait for the page to be ready:
    jQuery(document).ready(function($) {
      $("#monConsultationPopup").removeClass("overlayPopup");
    });
    // Use this instead if you want to wait for the page to load:
    // jQuery(window).load(function() {
    //   $("#monConsultationPopup").removeClass("overlayPopup");
    // });
  </script>
</body>
</html>

Good luck and all the best.

Try this code

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

And result

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

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() {
  $('#monConsultationPopup').removeClass('overlayPopup');
});

.overlayPopup{
  color:red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="monConsultationPopup" class="overlayPopup"> The class removed </div>

Your JS seems perfect, just check two things

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

HTML

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

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

Check This Working CODEPEN

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Remove div class on page loading - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)