How to make checkbox disappear when a different checkbox is changed

document.addEventListener('DOMContentLoaded', (e) => {
const form = document.getElementById('registrar');
const input = form.querySelector('input');

const mainDiv = document.querySelector('.main');
const ul = document.getElementById('invitedList');
const div = document.createElement('div');

const filterLabel = document.createElement('label');
const filterCheckBox = document.createElement('input');

filterLabel.textContent = "Hide those who haven't confirmed yet";
filterCheckBox.type = 'checkbox';
div.appendChild(filterLabel);
div.appendChild(filterCheckBox);
mainDiv.insertBefore(div, ul);
filterCheckBox.addEventListener('change', (e) => {
  const lis = ul.children;
  const isChecked = e.target.checked;
  if (isChecked) {
    confCheckbox.style.display = 'none';
    confLabel.style.display = 'none';
    for (let i = 0; i < lis.length; i += 1) {
      let li = lis[i];
      if (li.className === 'responded') {
        li.style.display = '';
      } else {
         li.style.display = "none";
        confCheckbox.style.display = '';
    confLabel.style.display = '';
      }
    } 
  } else {  
  for (let i = 0; i < lis.length; i += 1) {    
    const li = lis[i];
    li.style.display = '';
  }
  }
 });

function createLI(text) {
  const li = document.createElement('li');
  const span = document.createElement('span');  
  span.textContent = text;
  li.appendChild(span);

  const confCheckbox = document.createElement('input');
  const confLabel = document.createElement('label');

  confCheckbox.type = 'checkbox';
  confLabel.textContent = 'Confirmed';

  confLabel.appendChild(confCheckbox);
  li.appendChild(confLabel);  

  const editButton = document.createElement('button');
  editButton.textContent = 'edit';
  li.appendChild(editButton);

  const removeButton = document.createElement('button');
  removeButton.textContent = 'remove';
  li.appendChild(removeButton);
  return li;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  const li = createLI(text);

       if (input.value === '') {
   alert("Must type a real name!"); 
   li.style.display = 'none';
  }

  input.value = '';
  ul.appendChild(li);


});

ul.addEventListener('change', (e) => {
  const checkbox = event.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;

  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});

ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const button = e.target;
    const li = button.parentNode;
    const ul = li.parentNode;
    if (button.textContent === 'remove') {
      ul.removeChild(li);
    } else if (button.textContent === 'edit') { 
      const span = li.firstElementChild;
      const input = document.createElement('input');
      input.type = 'text';
      input.value = span.textContent;
      li.insertBefore(input, span);
      li.removeChild(span);
      button.textContent = 'save';
    } else if (button.textContent === 'save') { 
      const input = li.firstElementChild;
      const span = document.createElement('span');
      span.textContent = input.value;
      li.insertBefore(span, input);
      li.removeChild(input);
      button.textContent = 'edit';
    }
  }
});  
  });