Javascript：使用删除按钮删除受邀者
2021-05-25
54
大家好，我正在尝试创建一个受邀者列表，可以将人员添加到列表中，并且列表也可以通过删除按钮删除添加的受邀者。
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)
})
});
})
它按预期工作（可以删除受邀者），但每次我尝试删除时控制台都会出现错误，如下所示：
未捕获的 TypeError：无法读取 HTMLButtonElement 中 null 的属性“removeChild”。
我该如何解决这个错误？错误来自我评论的 forEach 循环。
这是 codepen： https://codepen.io/ShawnTan15/pen/abJwOvO
2个回答
请按如下方式更改您的代码：
...
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
})
});
})
}
pullidea-dev
2021-05-25
更新了 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);
})
Vivek Bani
2021-05-25