removeClass on element arrow with using jquery-CodePudding

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');
});

CodePudding user response：

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>