Javascript 如何在vanilla typescript todo应用程序中设置删除项目按钮

我正在使用vanilla typescript创建一个基本的待办事项列表应用程序。将按钮附加到每个列表项后，我希望在用户单击特定列表项上的按钮时删除这些项。为了执行此操作，我尝试在index.ts中添加第二个addEventListener方法来侦听remove按钮的单击，然后删除父元素的子元素。我的addEventListener方法如下所示：

listItemBtn.addEventListener("click", (e: Event) => {
  const element = e.target as HTMLUListElement;
  element.removeChild(element);
});

但是，我在控制台中不断收到一个错误，上面写着“UncaughtTypeError:无法读取null的属性'addEventListener'。我不确定为什么不能将.addEventListener追加到listItemBtn，但没有错误。你知道怎么解决这个问题吗

---

这里有一个指向CodeSandBox中项目的链接：

您正在查找

listItemBtn

之前的项目。如果你加上这一行

document.querySelectorAll("#listItemBtn").forEach(console.log);

在

表单.addEventListener的末尾，您将开始看到它填充了元素


这段代码中有很多地方需要修改。请谨慎使用
作为
，因为它可以防止Typescript看到潜在的运行时错误，例如元素可能是
null

你的问题是如何设置删除按钮，所以我并不认为
querySelectorAll
是正确的方法。我将在您创建的
btn
中添加侦听器。此时，您已经将
按钮
元素作为变量

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const value = listItem.value;

  const doc = new ListItem(value);

  list.render(doc, value, "start");
});

侦听器函数本身有问题。同样，在
const-element=e.target-as-htmlListElement中有一个麻烦的
as
按钮
，而不是
li

element.removeChild（element）
是错误的，因为您需要在父对象上调用
removeChild
，如
parent.removeChild（child）
。您可以将其视为
element.parentElement
（可能是
null
）。由于我们将此函数移动到
listmplate
中，因此我们可以访问父
li
变量。我们要删除的元素是
ul
中的
li
。所以实际上我们的
e.target
，也就是
btn
不是很有用

在
列表模板
的
呈现
方法中，执行以下操作：

btn.addEventListener("click", () => {
   this.container.removeChild(li);
});


如注释中所述，您不应设置非唯一的
id
。您可以使用
className
：

btn.className = "listItemBtn";

但你只需要在造型上使用它。我们不再在任何地方查询此元素


您可以清理
表单
提交侦听器。没有理由创建一个变量然后分配它。直接分配就行了。这也消除了手动指定类型的需要，因为类型是从您设置给变量的值中已知的

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const value = listItem.value;

  const doc = new ListItem(value);

  list.render(doc, value, "start");
});

沙盒中没有id为listItemBtn的元素，因此您的const（listItemBtn）为null…而且，一旦您解决了这个问题，您将遇到一个问题，即您打算使用listItemBtn的唯一
id
字段来识别、操作它。当然，如果页面上有多个列表项，它们不可能都具有相同的唯一id
listItemBtn
，因为这不是唯一性的工作方式@我使用ListTemplate中的.setAttribute将ID listItemBtn添加到动态附加的按钮中。我为index.ts中的按钮设置了常量以查找该ID，但它仍然不起作用。@JS\u是\u 18您正在查找
列表项btn
之前的列表项btn。如果添加这一行
document.queryselectoral（“#listItemBtn”）.forEach（console.log）
在
表单的末尾。addEventListener
然后您将开始看到它填充了元素。但这段代码中有很多地方需要修改。使用
作为
时要小心，因为它可以防止Typescript看到潜在的运行时错误，例如元素可能是
null
。这是有效的，而且这种解释是有意义的。非常感谢你！！！我还使用这些更改更新了沙盒：