Why is my text not replaced with an input element?

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

function createLI(text) {
  const li = document.createElement('li');
  const span = document.createElement('span');
  span.textContent = text;
  li.appendChild(span);
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  label.appendChild(checkbox);
  li.appendChild(label);  
  const editButton = document.createElement('button');
  editButton.textContent = 'Edit';
  label.appendChild(editButton);  
  const removeButton = document.createElement('button');
  removeButton.textContent = 'Remove';
  label.appendChild(removeButton);
  return li;
}

//this is the submit handler
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);
});

// this event handler marks guests off when they respond to user's RSVP
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 = '';
  }
});

//this handler is for the Remove and Edit buttons
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';
     li.insertBefore(input, span);   //Is the problem here?
     li.removeChild(span);             // Or maybe here?
   }
  }
});