kodum bu ancak remove işlemi yaptığımda 1. bastığımda çalışıyor 2.de Uncaught TypeError: Cannot read property 'removeChild' of null hatasını alıyorum çözümü nedir ?

let li = document.createElement('li');
ul.appendChild(li)

let ppSpan = document.createElement('span');
ppSpan.style.backgruondColor = color[Math.floor(Math.random() * color.length)];
ppSpan.innerHTML = name.value.charAt(0).replace(/^\w/, function($0){return $0.toUpperCase();}) + surname.value.charAt(0).replace(/^\w/, function($0){return $0.toUpperCase();})
ppSpan.style.backgroundColor = color[Math.floor(Math.random() * color.length)];
ppSpan.draggable = true;
li.appendChild(ppSpan)

let p = document.createElement('p');
p.innerHTML = name.value.replace(/^\w/, function($0){return $0.toUpperCase();}) + ' ' + surname.value.replace(/^\w/, function($0){return $0.toUpperCase();})
li.appendChild(p)

let removeSpan = document.createElement('span');
removeSpan.innerHTML = 'remove';
removeSpan.className = 'remove';
li.appendChild(removeSpan);

let removeSpan2 = document.querySelectorAll('.participants ul li .remove');
removeSpan2.forEach(button => button.addEventListener('click', (e) => {
    e.currentTarget.parentNode.parentNode.removeChild(e.currentTarget.parentNode);
    console.log(e.currentTarget.parentNode)
}));

name.value = '';
name.select();
surname.value= '';