Remove a class from a tag with more than one class

Question

I’m learning the web world, so I’m having a hard time even checking to see if there are any similar questions, if I have a similar answer in the forum, I’ll pass on the apology. Now I go to doubt. (I took a long time looking for something, I did not find.)

I have a TAG with two class in a table.

<td class="js-selector-user hide"></td>

When I click on an input type="radio" class=".js-selector-radio", i need to remove the Hide class.

I did jquery that way:

$(function(){
    var selectRadio = $('.js-selector-radio');
    var selecUser   = $('.js-selector-user');

    selectRadio.click(function() {
        selecUser.slideUp('fast', function(){
            selecUser.removeclass('.hide').slidedown('fast');
        }) ;
    });         
});

Do not remove the class :(

Answer 1

There are basically two "mistakes" in your code.

• The removeclass() is written in small, it should be that way removeClass().
• The slidedown() is also in tiny, it must be that way slideDown().

$(function(){
    var selectRadio = $('.js-selector-radio');
    var selectUser = $('.js-selector-user');

    selectRadio.click(function() {
        selectUser.slideUp('fast', function(){
            selectUser.removeClass('hide').slideDown('fast');
        }) ;
    });         
});

.hide{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" class="js-selector-radio">

<div class="js-selector-user hide">
    <td> Seu conteúdo </td>
</div>

Obs: I don’t know how your class is hide, but you should probably be using display: none; or else visibility: hidden; to hide the tag <td>. Both properties do not work in a tag <td>. That’s why I put the classes in <div>

Here is an example, showing not working:

.hide{
    visibility: hidden;
    display: none;
}

<td class="hide">Teste</td>

Alternative

Another alternative would be to use the very functions of Jquery to hide and display widgets.

$(function(){
    var selectRadio = $('.js-selector-radio');
    var selecUser   = $('.js-selector-user');
    
    selecUser.hide();
    
    selectRadio.click(function() {
        selecUser.slideUp('fast', function(){
            selecUser.show().slideDown('fast');
        }) ;
    });         
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" class="js-selector-radio">

<div class="js-selector-user">
    <td> Seu conteúdo </td>
</div>

Obs: it does not work in the <td>, then you have to use the <div> also.

Answer 2

You wrote removeclass but the class name is removeClass, uppercase "c", and you don’t need to put the class selector when removing.

The correct is:

$(function(){
    var selectRadio = $('.js-selector-radio');
    var selecUser   = $('.js-selector-user');

    selectRadio.click(function() {
        selecUser.slideUp('fast', function(){
            selecUser.removeClass('hide').slidedown('fast');
        }) ;
    });         
});