Why element is not being removed??

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList'); // creates element ul




function createLi (text) {

  const li = document.createElement('li'); // creates an li element forom the input
  li.textContent = text; // changes the element to text

  const label = document.createElement('label'); //creates a label element
  label.textContent = 'Confirmed'; // changes the text to say "confirmed"

  const checkbox = document.createElement('input'); //creates an input element
  checkbox.type = 'checkbox'; // changes the input element ot a checkbox element
  label.appendChild(checkbox); // appends the label to the front of the checkbox
  li.appendChild(label); //appends the label within the li element


  const editButton = document.createElement('button'); //creates a button element
  editButton.textContent = 'Edit'; //makes the button element to say remove
  li.appendChild(editButton); // appends the button within the li element

  const removeButton = document.createElement('button'); //creates a button element
  removeButton.textContent = 'Remove'; //makes the button element to say remove
  li.appendChild(removeButton); // appends the button within the li element

  return li; // returns the li through the conveyer

}



form.addEventListener('submit', (e) => {

  e.preventDefault(); // prevents browsers default action
  const text= input.value; //grabs the value from the user
  input.value = ''; // clears the value after submission
  const li = createLi(text); // this grabs the input and "javascript conveyer belts" it through the createLi function
  ul.appendChild(li); // grabs the li outputed from the above modular function and then appends to the DOM


});







ul.addEventListener('change' , (e) => {

  const checkbox = event.target; // references to checkbox itself
  const checked = checkbox.checked; // stores value of checkbox (true/checked or false/unchecked)
  const listItem = checkbox.parentNode.parentNode; // travarses two elements

if (checked){

    listItem.className = 'responded';

}
  else{

    listItem.className = '';


  }

});




ul.addEventListener('click' , (e) => {



  if (e.target.tagName === "BUTTON") { // button in all caps cause tagName value REQUIRES THIS

      const buttonPress = e.target;
      const li = buttonPress.parentNode;
      const ul = li.parentNode;

      if ( buttonPress.textContent === "Remove" ) {

        ul.removeChild(li);

      } else if ( buttonPress.textContent === "Edit" ) {

        const span = li.firstElementChild; // selecting the text that is not a span
        const input = document.createElement('input'); // creating an element for user input
        input.type = 'text' // this tells the input element that I want it to accept text
        li.insertBefore(input, span); // while referencing the li, which traverses the DOM from the base point of the button element, you use the 'insertBefore' property to insert the new input element before the span element 
        li.removeChild(span);
        buttonPress.textContent = 'Save';

      } 
  } 

});