There is a table with headings and heading arrows (down / up).
<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>
I want the class to be added when I click on the arrow, and to delete it in other arrows. I wrote such a handler for a click (for the down arrow), how can I make sure that the class is deleted from all other arrows?Thanks.Broke through different comments of parent and siblings, but there is no effect.
$('body').on('click', '.i-con-arrow-down', function() {
$(this).addClass('text-primary').siblings().removeClass('text-primary');
});
If I correctly understand you question, that should be a working code.
$('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>