Skoota Skoota - 3 months ago 9
CSS Question

removeClass change not reflected on page

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

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.