Problem when creating createLi function

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

 function createLi(text) {
    let li = document.createElement('li');
    li.textContent = text;


    let confirm = document.createElement('input');
    let label = document.createElement('label');
    let remove = document.createElement('button');
    remove.type = 'button';
    remove.textContent ='Remove';
    label.textContent = 'Confirmed';
    confirm.type = 'checkbox';
    li.appendChild(label);
    label.appendChild(confirm);
    li.appendChild(remove);
    return li;
};




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



    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 li = e.target.parentNode;

        const ul = li.parentNode;
        console.log(ul)


        ul.removeChild(li);

    }
    });