Problem:

1. Whenever user clicks on column's header in table, a classname .active from all the same table tr th span.sorting shoud have been removed.
2. Add a classname .active to the child of currently clicked target element.

Structure:

<table>
    <tr>
        <th>
            <span class="sorting"></span>
        </th>
        <th>
            <span class="sorting"></span>
        </th>
        <th>
            <span class="sorting active"></span>
        </th>
    </tr>
</table>

Solution (already done):

1. don't know
2. To add a class to a child of clicked column: trigger.target.children[0].classList.add('active')

What is the best way to remove all active classes from <span class="sorting"> whenever I click on the <th> element and assign an active class to currently clicked block?

No jQuery, please.

Problem:

1. Whenever user clicks on column's header in table, a classname .active from all the same table tr th span.sorting shoud have been removed.
2. Add a classname .active to the child of currently clicked target element.

Structure:

<table>
    <tr>
        <th>
            <span class="sorting"></span>
        </th>
        <th>
            <span class="sorting"></span>
        </th>
        <th>
            <span class="sorting active"></span>
        </th>
    </tr>
</table>

Solution (already done):

1. don't know
2. To add a class to a child of clicked column: trigger.target.children[0].classList.add('active')

What is the best way to remove all active classes from <span class="sorting"> whenever I click on the <th> element and assign an active class to currently clicked block?

No jQuery, please.

• javascript
• vuejs2

• Please share a working snippet using <> demonstrating your issue. – gurvinder372 Commented Dec 27, 2017 at 9:42
• What is the best way to remove all classes from <span class="sorting"> You want to remove classes or elements with class sorting? – gurvinder372 Commented Dec 27, 2017 at 9:46
• 1 you want to remove class sorting or active? – user9141233 Commented Dec 27, 2017 at 9:47
• @gurvinder372 - will do a jsfiddle in a moment, and sorry I forgot to say "remove all active classes", I've updated my question. – aspirinemaga Commented Dec 27, 2017 at 9:48

6 Answers 6

You can use querySelectorAll to fetch elements and Array.from to transform the output to array.

Array.from( document.querySelectorAll( "th .sorting" ) );

Now iterate them and remove the class using classList APIs

Array.from( document.querySelectorAll( "th .sorting" ) ).forEach( function( ele ){
  ele.classList.remove( "active" );
});

finally to the current element you can add the class to currentTarget of the event

event.currentTarget.classList.add( "active" );

Demo

var elements = Array.from( document.querySelectorAll( "th .sorting" ));

elements.forEach( function(ele){
   ele.addEventListener( "click", function(){
      elements.forEach( function( ele ){
         ele.classList.remove( "active" );
      });
      ele.classList.add( "active" );
   });
});

.active
{
  background-color: #f00;
}

<table>
  <tr>
    <th>
      <span class="sorting">A</span>
    </th>
    <th>
      <span class="sorting">B</span>
    </th>
    <th>
      <span class="sorting active">C</span>
    </th>
  </tr>
</table>

Remove all the class active on click of a .sorting element, then add on the currentTarget

let elements = Array.from(document.getElementsByClassName('sorting'));
elements.forEach(e => {
  e.addEventListener('click', s => {
    elements.forEach(el => el.classList.remove('active'));
    s.currentTarget.classList.add('active');
  });
})

<table>
  <tr>
    <th>
      <span class="sorting"></span>
    </th>
    <th>
      <span class="sorting"></span>
    </th>
    <th>
      <span class="sorting active"></span>
    </th>
  </tr>
</table>

var allTh = document.querySelectorAll("#tbl thead tr th");
for(var i = 0; i < allTh.length; i++){
  allTh[i].addEventListener("click",function(e){
      removeAllActiveClasses();
      e.target.classList.add("active");
  });
}

function removeAllActiveClasses(){
  var allActiveClassElement = document.querySelectorAll(".active");
  for(var i = 0; i < allActiveClassElement.length; i++){
    allActiveClassElement[i].classList.remove("active");
  }
}

.active{
  color : blue;
}

<table id="tbl">
    <thead>
      <tr>
          <th>
              <span class="sorting">Col 1</span>
              
          </th>
          <th>
              <span class="sorting">Col 2</span>
              
          </th>
          <th>
              <span class="sorting active">Col 3</span>
          </th>
      </tr>
    </thead>
</table>

Working directly on HTMLCollection should also be a possible way to go:

var elements = document.getElementsByClassName('sorting');
for(i=0;i<elements.length;i++) {
    elements[i].className -= ' active';
}

document.querySelectorAll(".active.sorting").forEach(e=>e.classList.remove("active"))
event.currentTarget.classList.add(".active")

we have forEach function on value returned from querySelector, so we can iterate over that domArray, then the second code line is to be placed in context on event listener

You can try the below code

var elems = Array.from(document.getElementsByClassName("sorting"));
//console.log(elems)
elems.forEach(e => e.addEventListener('click', function(event) {
  elems.forEach(e => e.classList.remove("active"))
  event.currentTarget.classList.add("active");
}));

body {
  font: 13px verdana
}

span.active {
  color: red;
}

span {
  display: block;
  margin: 0 10px;
  cursor: pointer
}

<table>
  <tr>
    <th>
      <span class="sorting">One</span>
    </th>
    <th>
      <span class="sorting">Two</span>
    </th>
    <th>
      <span class="sorting active">Three</span>
    </th>
  </tr>
</table>