removeClass JQuery

1

I want to add a class to a link in a list, I did, however I want to remove the class when I click on another link in the same list, and the class remains only in the clicked link. add I add however when I click on another link, the previously clicked link remains with the class. What am I doing wrong ???

HTML

<li class="list-group-item">
  <a onclick="requestFile(this.id)" id="{{ content.id}}">

    <!--Colocar o status do log-->
    <span class=""></span>
    <!--Colocar o status do log-->

    <div class="media">
        <div class="media-left">
            <img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ content.name}}</h4>
            {{ content.description}}
        </div>
    </div>
</a>

JQuery

$(document).on('click', '.page_video_content ul li a', function() {

    $('.page_video_content ul li a span').removeClass('started');

    $('span', this).addClass('started');
    if($('span.started', this)) {
        $('span.started', this).css({
            'background': '#f3c03d'
        }).text("Assistindo");
    }
});
    
asked by anonymous 01.04.2016 / 19:14

1 answer

0

Here is the answer, which can be executed right here!

$(document).on('click', '.page_video_content ul li a', function() {
    alert('lol');
  $('.started').css('background', '');
  $('.started').removeClass('started');

    $('span', this).addClass('started');
    if($('span.started', this)) {
        $('span.started', this).css({
            'background': '#f3c03d'
        }).text("Assistindo");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><divclass="page_video_content">
  <ul>
<li class="list-group-item">
  <a onclick="requestFile(this.id)" id="{{ content.id}}">

    <!--Colocar o status do log-->
    <span class="started">Assistindo</span>
    <!--Colocar o status do log-->

    <div class="media">
        <div class="media-left">
            <img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ content.name}}</h4>
            {{ content.description}}
        </div>
    </div>
</a>
  </li>
  
  <li class="list-group-item">
  <a onclick="requestFile(this.id)" id="{{ content.id}}">

    <!--Colocar o status do log-->
    <span class="">Assistindo</span>
    <!--Colocar o status do log-->

    <div class="media">
        <div class="media-left">
            <img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ content.name}}</h4>
            {{ content.description}}
        </div>
    </div>
</a>
  </li>
  
  <li class="list-group-item">
  <a onclick="requestFile(this.id)" id="{{ content.id}}">

    <!--Colocar o status do log-->
    <span class="">Assistindo</span>
    <!--Colocar o status do log-->

    <div class="media">
        <div class="media-left">
            <img class="icon-son-play" src="{% static "img/icons/play-gray.png" %}" alt="">
        </div>
        <div class="media-body">
            <h4 class="media-heading">{{ content.name}}</h4>
            {{ content.description}}
        </div>
    </div>
</a>
  </li>
    </ul>
  </div>
    
01.04.2016 / 19:39