Remove a class from a Tag with more than one class

1

I'm learning the web world, so I'm having trouble even checking to see if there are similar questions, if you have any similar forum answers, I apologize. Now I'm going to doubt it. (I took a long time looking for something, I did not find it.)

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 class hide.

I did the jquery this way:

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

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

Does not remove the class: (

    
asked by anonymous 21.11.2018 / 14:45

2 answers

1

It basically has two "errors" in your code.

  • The removeclass() is written in lower case, it should be removeClass() .
  • The slidedown() is also in lower case, it should be 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><inputtype="radio" class="js-selector-radio">

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

Note: I do not know how your hide class is, but you should probably be using display: none; or visibility: hidden; to hide the <td> tag. Both properties do not work on a <td> tag. So I put the classes in <div>

Here is an example, showing non-operation:

.hide{
    visibility: hidden;
    display: none;
}
<td class="hide">Teste</td>

Another Alternative

Another alternative would be to use the JQuery functions to hide and display the elements.

$(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><inputtype="radio" class="js-selector-radio">

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

Obs: It does not work on <td> , so you have to use <div> as well.

    
21.11.2018 / 16:11
0

You have written removeclass but the class name is removeClass , with a capital "c", and you do not need to put the class chooser at the time of removing.

The correct one is:

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

    selectRadio.click(function() {
        selecUser.slideUp('fast', function(){
            selecUser.removeClass('hide').slidedown('fast');
        }) ;
    });         
});
    
21.11.2018 / 14:48