CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Skydiver
Skydiver

Reputation: 121

jQuery - .removeClass doesn't work

I have a button <button id="subs1">test</button> and a div

<div class="subsystem subhide">
  <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3>
  <p>Lorem</p>
</div>

In the css file the class .subhide is defined as 

.subhide {
 display: none;
}

and the jQuery code that I'm trying to get to work is

jQuery('#subs1').on('click', function(){
jQuery('.subsystem').removeClass('subhide');
});

When clicking the button nothing happens, why is that?

Thanks in advance!

Upvotes: 2

Views: 3727

Answers (5)

Skydiver
Skydiver

Reputation: 121

I'm not really sure why, but this snippet works:

jQuery( document ).ready(function() {
 jQuery('#subs1')
  .click(function(){
  jQuery('body').find('.subsystem').addClass('subhide')})
});

Upvotes: 0

Bamieh
Bamieh

Reputation: 10936

The problem is that jQuery('#subs1') finds elements with that id and binds to them. If elements don't have the id at the time the binding is made, the events will not be handled.

Attach on DOM ready

To solve this issue, wrap the code with on document ready, this way your code will execute only when your dom (document) is ready.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

A better approach

On the other hand, if your button is dynamically added, it will not be there when the event listener wants to be binded, so the code will practically do nothing. To solve this issue, change your code to the following:

jQuery(document.body).on('click', '#subs1', function() {
    jQuery('.subsystem').removeClass('subhide');
});

This event will be attached to the document.body which is always there in the DOM tree. Now when the body is clicked, the event will propagate to #subs1 regardless of the time the button was attached to the DOM.

Working Snippet

Here is a working example:

$( document ).ready(function() {
  jQuery(document.body).on('click', '#subs1', function() {
    jQuery('.subsystem').removeClass('subhide');
  });

  jQuery(document.body).on('click', '#subs2', function() {
    jQuery('.subsystem').addClass('subhide');
  });
});
.subhide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="subs1">Unhide</button>
<button id="subs2">hide</button>
<div class="subsystem subhide">
  <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3>
  <p>Lorem</p>
</div>

Upvotes: 2

MHF
MHF

Reputation: 221

Try it:

    $( document ).ready(function() {
      $('#subs1').on('click', function(){
          $('body').find('.subhide').removeClass('subhide');
      });
   });

and if you use chrome, clear your browser cache.

Upvotes: 2

user7110739
user7110739

Reputation: 

jQuery('#subs1').on('click', function(){
jQuery('.subsystem').removeClass('subhide');
});


jQuery('#toggle').on('click', function(){
jQuery('.subsystem').toggle('subhide');
});
.subhide {
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subsystem subhide">
  <h3 style="text-align: center; font-size: 30px; font-weight: normal;">Electronics</h3>
  <p>Lorem</p>
</div> 
<button id="subs1">Button</button>

<button id="toggle">Toggle Button</button>

You need to define button outside of class

Hope this help!

Upvotes: 1

MBJH
MBJH

Reputation: 1639

In the stylesheet, change it to:

.subsystem.subhide {
display: none;
}

.subsystem {
display: anything;
}

It should work

Upvotes: 1

Related Questions