Javascript：使用移除按钮移除被邀请者

大家好，我正在尝试创建一个被邀请者列表，可以向列表中添加人，该列表还可以通过“删除”按钮删除添加的被邀请者

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

function createLI(text) {
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  li.appendChild(label);  
  const button = document.createElement('button');
  button.textContent = 'remove';
  button.classList.add('remove');
  li.appendChild(button);
  return li;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);
  
const remove = document.querySelectorAll(".remove") //the problem lies here
remove.forEach(i => {
  i.addEventListener('click', (e) => {
  const li = e.target.parentNode;
  const ul = li.parentNode;
  ul.removeChild(li)  
  
   })
  });

})

它按预期工作（可以删除被邀请者），但每次我尝试删除时，控制台都会出现错误，如下所示：

...
const remove = document.querySelectorAll(".remove") //the problem lies here
if (remove.length != 0) { // add this loop

  remove.forEach(i => {
    i.addEventListener('click', (e) => {
    const li = e.target.parentNode;
    const ul = li.parentNode;
    if(ul != null) ul.removeChild(li)  // add if statement
  
      })
    });

  })
}

未捕获的TypeError:无法读取null的属性“removeChild” 在HTMLButtoneElement

如何解决此错误？错误来自我注释的forEach循环

---

这是代码笔：

请按如下方式更改代码：

...
const remove = document.querySelectorAll(".remove") //the problem lies here
if (remove.length != 0) { // add this loop

  remove.forEach(i => {
    i.addEventListener('click', (e) => {
    const li = e.target.parentNode;
    const ul = li.parentNode;
    if(ul != null) ul.removeChild(li)  // add if statement
  
      })
    });

  })
}

---

请按以下方式更改您的代码：

...
const remove = document.querySelectorAll(".remove") //the problem lies here
if (remove.length != 0) { // add this loop

  remove.forEach(i => {
    i.addEventListener('click', (e) => {
    const li = e.target.parentNode;
    const ul = li.parentNode;
    if(ul != null) ul.removeChild(li)  // add if statement
  
      })
    });

  })
}

更新的JS代码

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

function createLI(text) {
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  li.appendChild(label);  
  const button = document.createElement('button');
  button.textContent = 'remove';
  button.classList.add('remove');
  button.addEventListener('click', (e) => {
  const li = e.target.parentNode;
  const ul = li.parentNode;
  ul.removeChild(li)
  
   });
  li.appendChild(button);
  return li;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);

})

更新的JS代码

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

function createLI(text) {
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  li.appendChild(label);  
  const button = document.createElement('button');
  button.textContent = 'remove';
  button.classList.add('remove');
  button.addEventListener('click', (e) => {
  const li = e.target.parentNode;
  const ul = li.parentNode;
  ul.removeChild(li)
  
   });
  li.appendChild(button);
  return li;
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);

})

---

提供您的html代码。@RajdeepDebnath我发布了代码Peni更新了代码。请提供您的html代码。@RajdeepDebnath我发布了代码Peni更新了代码。我尝试了，但仍然出现相同的错误“removeChild”null@ShawnTan我刚刚编辑了我的答案。请再试一次。我试过了，但仍然出现相同的错误“removeChild”null@ShawnTan我刚刚编辑了我的答案。请再试一次。谢谢。这也行！谢谢你，这也行！