Jquery selected div background color change

Question

I have a selection menu like this one

<div class="leftgame-container">
    {foreach from=$game_arrayleft item=row}
    <div class="left-column">
        <div class="team-logo">
            <img width="72" height="68" src="../public/img/logo/{$row.logo}" alt="Teamlogo">
        </div>
        <div class="team-name">
            {$row.venue}<br>
            {$row.game_date|date_format:"%e. %B  %Y"}    
        </div>
        <div class="team-check">
            {if $row.status eq 1}
            {html_checkboxes name='gamecheck' values=$row.id separator='<br />'}
            {/if}
        </div>
    </div>
    {/foreach}
</div>

Its a smarty foreach loop. Game venue, date, logo will display here. When a user tap on particular game, i want to change that div background color to green.

Here is my Jquery code

$(document).ready(function() {
    $('a.pagerlink').click(function(event){
        console.log('hyperlink click');
        $(this).children('.manage-friends-first').addClass("greenBackground");
        var id = $(this).attr('id');
        $('#load').show();
        $.post(
            "invited-friends",
            { gameid: id },
            function(data) {}
        )
        .fail(function() {})
    });
});

Here when a user click on hyperlink am appending a class "greenBackground" to "manage-friends-first". The background color is changing. But my problem is when to remove this class?. When user tap on next game div the background color of earlier div persist. Please help me to solve this issue. Thanks

Answer 1

Use this:

$(document).ready(function () {
    $('a.pagerlink').click(function (event) {

        //Remove all the class `greenBackground` from already added dom
        $('.greenBackground').removeClass('greenBackground');

        console.log('hyperlink click');
        $(this).children('.manage-friends-first').addClass("greenBackground");
        var id = $(this).attr('id');
        $('#load').show();
        $.post("invited-friends",
                {gameid: id},
        function (data) { }).fail(function () { });
    });
});