(Duda) Agregar clase css a un único elemento

[opzina]

Tengo una lista desordenada con 8 elementos li:

Código HTML:

<ul>
              <li class="list"><a class="letter" href="#">A</a>
              <li class="list"><a class="letter" href="#">B</a>
              <li class="list"><a class="letter" href="#">C</a>
              <li class="list"><a class="letter" href="#">D</a>
               <li class="list"><a class="letter" href="#">A</a>
              <li class="list"><a class="letter" href="#">B</a>
              <li class="list"><a class="letter" href="#">C</a>
              <li class="list"><a class="letter" href="#">D</a>
          </ul>
 

Lo que necesito es:

Necesito agregar una clase .active en forma individual y que el resto de los elementos no queden activos.

Código Javascript:

<script type="text/javascript">
 
    $(document).ready(function() {
 
        $('.letter').click(function(event) {
            $(this).parent().addClass('active');
        });
    });
 
</script>
 

[Naahuel]

Podés hacer algo así:

Código Javascript:

$(this).parent().addClass('active').siblings().removeClass('active');
 

Le asignás la clase active al padre y se la quitás a los hermanos del padre si la tienen.

Por cierto, esa forma de usar las clases está muy mal, le quita todo el propósito. Deberías usar la clase "lista" en el ul y nada más. Después los <li> los seleccionás con ".lista li" y los <a> con ".lista li a".

[opzina]

Muchas gracias por todos.