Hay una tabla con encabezados y flechas de encabezado (abajo/arriba).
<th><div> <div class='column-name'>Col1</div> <div class='arrows'> <div class="i-con-arrow-down"></div> <div class="i-con-arrow-up"></div> </div> </div></th> <th><div> <div class='column-name'>Col2</div> <div class='arrows'> <div class="i-con-arrow-down"></div> <div class="i-con-arrow-up"></div> </div> </div></th> <th><div> <div class='column-name'>Col3</div> <div class='arrows'> <div class="i-con-arrow-down"></div> <div class="i-con-arrow-up"></div> </div> </div></th>Quiero que la clase se agregue cuando haga clic en la flecha y que la elimine en otras flechas. Escribí un controlador de este tipo para un clic (para la flecha hacia abajo), ¿cómo puedo asegurarme de que la clase se elimine de todas las demás flechas? Gracias. Rompí diferentes comentarios de padres y hermanos, pero no hay efecto.
$('body').on('click', '.i-con-arrow-down', function() { $(this).addClass('text-primary').siblings().removeClass('text-primary'); });Si entiendo correctamente su pregunta, ese debería ser un código de trabajo.
$('body').on('click', '.i-con-arrow-down, .i-con-arrow-up', function() { $('.text-primary').removeClass('text-primary'); $(this).addClass('text-primary'); }); .i-con-arrow-down, .i-con-arrow-up { background: black; padding:20px; margin: 20px; } .text-primary { background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <th><div> <div class='column-name'>Col1</div> <div class='arrows'> <div class="i-con-arrow-down"></div> <div class="i-con-arrow-up"></div> </div> </div></th> <th><div> <div class='column-name'>Col2</div> <div class='arrows'> <div class="i-con-arrow-down"></div> <div class="i-con-arrow-up"></div> </div> </div></th> <th><div> <div class='column-name'>Col3</div> <div class='arrows'> <div class="i-con-arrow-down"></div> <div class="i-con-arrow-up"></div> </div> </div></th>