My edit and remove buttons are not working.

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


form.addEventListener('submit', (e)=>{
e.preventDefault();
const text= input.value;
  input.value= '';
  const li= document.createElement('li');
  li.textContent= text;
  const label= document.createElement ('label');
  label.textContent= 'confirmed';
  const checkbox= document.createElement('input');
  checkbox.type= 'checkbox';
  label.appendChild(checkbox);
  li.appendChild (label);
  ul.appendChild(li);

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


  const removebutton= document.createElement('button');
  removebutton.textcontent= 'remove';
  li.appendChild(removebutton);

  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' ){
 if (e.target.textContent==='remove'){
   const li= e.target. parentNode;
   const ul= li. parentNode;
   ul.removeChild(li);
 } else if(e.target.textContent === 'edit'){
 console.log('edit');

   }
  }                   
 });