Как при нажатии на checkbox скрывать определенные параметры часов?

function clock() {
  let date = new Date()
  let delay = 1000 - new Date().getMilliseconds()

  updateClock(date)
  setTimeout(clock, delay)
}

let AA_str, YY, MM, DD, AA, hh, mm, ss, text_date, text_time

function updateClock(date) {
  AA_str = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
  YY = date.getFullYear().toString().slice(-2)
  MM = date.getMonth() + 1
  DD = date.getDate()
  AA = date.getDay()
  hh = date.getHours()
  mm = date.getMinutes()
  ss = date.getSeconds()

  if (MM < 10) MM = '0' + MM
  if (DD < 10) DD = '0' + DD
  if (hh < 10) hh = '0' + hh
  if (mm < 10) mm = '0' + mm
  if (ss < 10) ss = '0' + ss

  let chkSec  = document.getElementById("seconds")
  let chkDay  = document.getElementById("day-str")
  let chkDate = document.getElementById("date")
  
  text_time = `${hh} : ${mm}`
  text_date = ``
  
  if (chkDate.checked) text_date = `${YY} - ${MM} - ${DD}`
  
  if (chkSec.checked) text_time += ` : ${ss}`
  
  if (chkDay.checked) text_date += ` : ${AA_str[AA]}`

  document.querySelector('.time').innerHTML = text_time
  document.querySelector('.date').innerHTML = text_date
}
clock()

const obj = {
  AA_str,
  DD,
  ss
}

const checkbox = document.querySelector('input[type=checkbox]')
checkbox.addEventListener('change', (e) => {
  const checked = e.target.checked
  if (!checked) {

  }
})

<div class="clock">
  <div class="clock__item date"></div>
  <div class="clock__item time"></div>
</div>
<div class="format">
  <div class="input__field">
    <input type="checkbox" id="seconds" name="seconds" checked>
    <label for="seconds">seconds</label>
  </div>
  <div class="input__field">
    <input type="checkbox" id="day-str" name="day-str" checked>
    <label for="day-str">day-str</label>
  </div>
  <div class="input__field">
    <input type="checkbox" id="date" name="date" checked>
    <label for="date">date</label>
  </div>
</div>

const clockNodes = getClockNodes();
const checkboxNodes = getCheckboxNodes();
const comparisonNodes = getComparisonNodes(clockNodes, checkboxNodes);

addEventListenerCheckboxNodes(comparisonNodes);
initClock(clockNodes);

function getComparisonNodes(clockNodes, checkboxNodes) {
    return [
        {
            checkbox: checkboxNodes.dayStrCkeckboxNode,
            clock: clockNodes.AANode
        },
        {
            checkbox: checkboxNodes.dateCheckboxNode,
            clock: clockNodes.dateNode
        },
        {
            checkbox: checkboxNodes.secondsCheckboxNode,
            clock: clockNodes.ssNode
        }
    ];
}

function getClockNodes() {
    const clockNode = document.querySelector('.clock');

    return {
        clockNode,
        dateNode: clockNode.querySelector('.date'),
        timeNode: clockNode.querySelector('.time'),
        YYNode: clockNode.querySelector('.YY'),
        MMNode: clockNode.querySelector('.MM'),
        DDNode: clockNode.querySelector('.DD'),
        AANode: clockNode.querySelector('.AA'),
        hhNode: clockNode.querySelector('.hh'),
        mmNode: clockNode.querySelector('.mm'),
        ssNode: clockNode.querySelector('.ss'),
    };
}

function getCheckboxNodes() {
    const formatNode = document.querySelector('.format');
    return {
        dayStrCkeckboxNode: formatNode.querySelector('#day-str'),
        dateCheckboxNode: formatNode.querySelector('#date'),
        secondsCheckboxNode: formatNode.querySelector('#seconds')
    };
}

function initClock(clockNodes) {
  updateClock(clockNodes);
  setInterval(() => updateClock(clockNodes), 1000);
}

function updateClock(clockNodes) {
    const date = new Date();

  const AA_str = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
    let YY = date.getFullYear().toString().slice(-2)
            MM = date.getMonth() + 1
            DD = date.getDate()
            AA = date.getDay()
            hh = date.getHours()
            mm = date.getMinutes()
            ss = date.getSeconds();
    
  if (MM < 10) MM = "0" + MM;
  if (DD < 10) DD = "0" + DD;
  if (hh < 10) hh = "0" + hh;
  if (mm < 10) mm = "0" + mm;
  if (ss < 10) ss = "0" + ss;

    clockNodes.hhNode.textContent = hh;
    clockNodes.mmNode.textContent = mm;
    clockNodes.ssNode.textContent = ss;

    clockNodes.YYNode.textContent = YY;
    clockNodes.MMNode.textContent = MM;
    clockNodes.DDNode.textContent = DD;
    clockNodes.AANode.textContent = AA_str[AA];
}

function addEventListenerCheckboxNodes(comparisonNodes) {

    for (const comparison of comparisonNodes) {
        comparison.checkbox.addEventListener('change', (e) => {
            const checked = !e.target.checked;
            addClass(comparison.clock, 'hide', checked);
        });
    }
}

function addClass(node, cssClass, bool) {
    if (bool === true) {
        node.classList.add(cssClass);
    } else if (bool === false) {
        node.classList.remove(cssClass);
    }
}

.input__field {
  user-select: none;
}

.clock-value {
  transition-timing-function: ease;
  transition-duration: 0.3s;
  transition-property: visibility, opacity;
}

.hide {
  opacity: 0;
  visibility: hidden;
}

<div class="clock">
  <div class="clock__item clock-value date">
    <span class="YY clock-value"></span> -
    <span class="MM clock-value"></span> -
    <span class="DD clock-value"></span>
    <span class="AA clock-value"></span>
  </div>
  <div class="clock__item clock-value time">
    <span class="hh clock-value"></span> :
    <span class="mm clock-value"></span> :
    <span class="ss clock-value"></span>
  </div>
</div>
<div class="format">
  <div class="input__field">
    <input type="checkbox" id="seconds" name="seconds" checked>
    <label for="seconds">seconds</label>
  </div>
  <div class="input__field">
    <input type="checkbox" id="day-str" name="day-str" checked>
    <label for="day-str">day-str</label>
  </div>
  <div class="input__field">
    <input type="checkbox" id="date" name="date" checked>
    <label for="date">date</label>
  </div>
</div>