Remove specific class when button/dropdown click

Question

I want to remove specific class ("help-text"). when user click on button specific class will be removed.

Here is my code

<div class="dropdown dropdown-lg">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <img src="img/find-match.png"/>
        <span class="help-text">Click Here</span>
    </button>
</div>

<script>
jQuery(document).click(function (e) {
    if (!jQuery(e.target).hasClass('dropdown-lg')) {
        jQuery('.dropdown-lg').removeClass('help-text');
    }
});
</script>

Kindly advice me any solution.

Shaunak D · Accepted Answer · 2015-06-19 06:51:19Z

2

The span with help-text, is inside the button. So you can use,

$(e.target).find('.help-text').removeClass('help-text')

or

$('.help-text',e.target).removeClass('help-text')

Also, instead of handling click on document I would suggest,,

$('button.dropdown-toggle').click(...

Fiddle

$('button.dropdown-toggle').click(function(){
    $(this).find('.help-text').toggleClass('help-text')
});

edited Jun 19, 2015 at 6:51

answered Jun 19, 2015 at 6:25

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shaunak D Over a year ago

Do you want to remove the class, or remove the element? This works ay my end. Check this jsfiddle.net/BqKNV/401

sleekdev Over a year ago

when user click on button class is removed but when user again click on button for hide div then class is not set back

kaushik dey · Accepted Answer · 2015-06-19 06:37:26Z

1

jQuery('button.btn').click(function (e) {
        if (jQuery(this).find('.help-text').length) {
            jQuery('.help-text').removeClass('help-text');
        }
    });

answered Jun 19, 2015 at 6:37

kaushik dey

1022 bronze badges

1 Comment

sleekdev Over a year ago

when user click on button class is removed but when user again click on button for hide div then class is not set back. I only want to removed class/element on click.

AmmarCSE · Accepted Answer · 2015-06-19 06:45:34Z

1

SInce .help-text is a child of the button, use find()

jQuery('.dropdown-lg').find('.help-text').removeClass('help-text');

jQuery('.dropdown-lg').click(function(e) {
  jQuery(this).find('.help-text').removeClass('help-text');
});

.help-text {
  background: green;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="dropdown dropdown-lg">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <img src="img/find-match.png" /><span class="help-text">Click Here</span>
  </button>
</div>

edited Jun 19, 2015 at 6:45

answered Jun 19, 2015 at 6:20

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

2 Comments

AmmarCSE Over a year ago

OH, sorry, had a typo, changed removeClass to find for the first call

AmmarCSE Over a year ago

@dev, see the working example in my answer. It is in the code snippet

Collectives™ on Stack Overflow

Remove specific class when button/dropdown click

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related