Question

I am attempting to remove a CSS class from a particular DIV on-the-fly. I have the following jQuery code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.intro').click(function() {
            $('.row_2').removeClass('.last_row');
        });
    });
</script>

..with the following HTML

<div class="row_1 intro">Intro Row 1</div>
<div class"row_1 detail">Detail Row 1</div>
<div class="row_2 intro last_row">Intro Row 2</div>
<div class="row_2 detail last_row">Detail Row 2</div>

Conceptually, when the user clicks any of the intro DIVs it should remove the last_row class from the row_2 DIVs. However, it doesn’t seem to be working as the CSS styling applied to last_row on the rendered page is not removed from the row_2 DIVs once the user clicks on the intro DIV.

Is this a problem with the jQuery code, or is there something else I need to do so that the relevant DIVs on the rendered page will update on-the-fly in response to the last_row class being removed?

Thanks in advance for any help!

Answer 1

Use $('.row_2').removeClass('last_row'); instead of $('.row_2').removeClass('.last_row'); and it should work.

The argument passed to .removeClass should just be the name of the class, without the dot.