[JavaScript] 다른 요소 클래스 모두 지우기

선택 요소 외의 형제요소 클래스 모두 지우기 

미니 프로젝트를 하다가 형제요소가 많은 상태에서 특정 요소를 선택했을 때만 is-active 클래스를 추가하고,

나머지 요소들은 is-active 클래스를 어떻게 지울 것인가...를 고민하다가 스택 오버플로우에서 보고 참고하게 되었다.

예전에 제이쿼리로는 한줄로 쉽게 했던 것 같은데 바닐라 JS로만 하려니까 아직 영 쉽지 않은 것!!...

 

아래 사진과 같이 현재 play-button 이라는 동일한 클래스를 가진 버튼이 3개 있고, 클릭한 요소에만 is-active를 추가,

나머지는 있었더라도 없애주는 것을 원했다.

 

 

 

해결

function handlePlayerImage(e) {
  e.preventDefault();
  const buttonGroup = this.parentNode;
  const active = buttonGroup.querySelector('.is-active');
  if (active) {
    active.classList.remove('is-active');
  }
  e.currentTarget.classList.add('is-active');
}

buttonList.forEach((button) => {
  button.addEventListener('click', handlePlayerImage);
});

이 부분에 해당하는 일부 코드만 가져왔는데, 클릭한 요소의 부모요소를 찾아 is-active 클래스가 있는 요소를 찾고
active 클래스가 있다면 없애주고, 현재 타겟인 요소에만 클래스를 추가하도록 했다.