Best practice to select an event target with Vanilla JS

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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

Answer 5

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

Answer 6

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>