如何从 Typescript 待办事项列表应用程序中删除列表项答案

【问题标题】：How to remove list item from Typescript todo list app如何从 Typescript 待办事项列表应用程序中删除列表项
【发布时间】：2021-07-03 21:33:57
【问题描述】：

我正在尝试仅使用 Typescript、HTML 和 CSS 构建一个基本的待办事项列表应用程序。 app.ts 设置为侦听提交事件。 ListTemplate 类定义了一个渲染方法，用于创建列表项元素并将其附加到 DOM。 ListItem 类将 listItem 定义为字符串类型，并执行 HasFormatter 接口中定义的 format() 函数。列表项动态附加到 HTML 中的 <ul></ul> 容器。向 DOM 输入文本和追加列表项的功能目前运行良好。我现在正在尝试将功能删除项按钮附加到我在渲染方法中设置的每个列表项：const btn = document.createElement('button')。我不确定如何设置功能以在单击删除按钮时删除单个列表项。我尝试向 app.ts 添加另一个事件侦听器，该侦听器侦听 ID 为 listItemBtn 的删除按钮，但不确定如何设置侦听器（或可能是 ListTemplate 中的删除方法）以在单击删除时定位特定列表项按钮。关于如何做到这一点的任何想法？谢谢！

这里是项目的 CodeSandBox 链接：https://codesandbox.io/s/vanilla-typescript-forked-xnnf4q

app.ts

import { ListItem } from './classes/ListItem.js';
import { ListTemplate } from './classes/ListTemplate.js';
import { HasFormatter } from './interfaces/HasFormatter.js'

const form = document.querySelector('#newForm') as HTMLFormElement; // typecasting, casting the element to be a certain type
const listItemBtn = document.querySelector('#listItemBtn') as HTMLButtonElement;
const listItem = document.querySelector('#listItem') as HTMLInputElement;

//list template instance
const ul = document.querySelector('ul')!;
const list = new ListTemplate(ul)

form.addEventListener('submit', (e: Event) => {
    e.preventDefault();

    let values: [string] // tuple
    values = [listItem.value]

    let doc: HasFormatter;

    doc = new ListItem(...values)

    list.render(doc, listItem.value, 'start')
})

listItemBtn.addEventListener('onclick', (e: Event) => {
    e.preventDefault();
???
}

ListTemplate.ts

import { HasFormatter } from "../interfaces/HasFormatter.js";

export class ListTemplate {
    constructor(private container: HTMLUListElement){}

    render(item: HasFormatter, heading: string, position: 'start' | 'end'){
        const li = document.createElement('li');

        const p = document.createElement('p');
        const btn = document.createElement('button');
        btn.appendChild(document.createTextNode('x'));
        btn.setAttribute('id', 'listItemBtn')
        p.innerText = item.format();
        li.append(p);
        li.append(btn)

        if (position === 'start'){
            this.container.prepend(li);
        } else {
            this.container.append(li);
        }
    }

    remove() {
        ???
    }
}

ListItem.ts

import { HasFormatter } from '../interfaces/HasFormatter.js'

export class ListItem implements HasFormatter { //ensuring that all structures follow HasFormatter structure
    constructor(
        public listItem: string
    ) {}

    format() {
        return `${this.listItem}`
    }
}

HasFormatter.ts

export interface HasFormatter {
    format(): string
}

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TypeScript Tutorial</title>
  <!-- <link rel="stylesheet" href="styles.css"> -->
</head>
<body>

  <header>
    <form id="newForm">
      <div class="field">
        <label>List item</label>
        <input type="text" id="listItem">
      </div>
      <button>Add</button>
    </form>

    <div class="wrapper">

      <!-- output list -->
      <ul class="item-list">
        
      </ul>
    </div>
  </header>

  <script type="module" src='app.js'></script>
</body>
</html>

【问题讨论】：

你是如何创建删除按钮的？
@brk 我在 ListTemplate.ts 的 render 方法中创建它。见const btn = document.createElement('button'); btn.appendChild(document.createTextNode('x'));
btn.setAttribute('id', 'listItemBtn') ，是否为所有按钮创建相同的 id ？
@brk 我是这样设置的，但我现在明白它不起作用。所有按钮都需要有自己的 on id，对吧？
没错。一旦每个按钮都有唯一的 id ，然后将事件侦听器附加到这些按钮并传递列表项的 id。在事件侦听器函数中，再次使用 document.querySelector 和查询具有相同 id 的列表项。然后你可以使用removeChild

标签： javascript html css typescript

【解决方案1】：

我不太确定，但我认为应该有点像

listItemBtn.addEventListener('onclick', (e: Event) => {
    //get the "<li>" where the button is
    const element=e.target.parent;
    //remove it
    element.parent.removeChild(element);
}

【讨论】：

谢谢。我尝试添加类似listItemBtn.addEventListener('onclick', (e: Event) => { const element = e.target as HTMLUListElement element.parentElement?.removeChild(element) }) 的内容，但这也没有用。我应该对 e.target 进行类型转换吗？意思是，我应该将 e.target 的类型设置为 HTMLUListElement 吗？还是别的什么？