親要素、子要素に影響されないクラスのつけはずしjavaScript

window.onload = function(){
 const targetBox = document.querySelector('#js-search');
 const inputArea = document.querySelector('#js-search-text');
 const openArea = document.querySelector('#js-open');
 const closeArea = document.querySelector('.close');
 
 targetBox.addEventListener("focusin",() => {
   inputArea.classList.add('focused');
   openArea.classList.add('opened');
   targetBox.classList.add('form-wraped');
 });
 
 document.querySelector('.close').addEventListener('click',() => {
   inputArea.classList.remove('focused');
   openArea.classList.remove('opened');
   targetBox.classList.remove('form-wraped');
 });
}

最初に指定したクラスのエリアを読み込みつづける記述をして、あとはそのエリア内で指定するアクションが起きた時、指定したエリアのクラスをつけはずす。

異なるアクションでクラスをつけはずしたい時など便利。