单击删除按钮时如何获取鼠标单击事件以删除正确的列表项

Question

我在待办事项列表应用程序中遇到问题。 我有一个用户提交输入并将其显示在屏幕上的一个栏中。

在提交时，用户会得到一个栏：

.done（切换按钮）。他们自己的输入作为“字符串”。一个删除按钮，用于删除他们选择的条目。

现在，当用户单击栏中的任意位置时，它会删除该条目。 我希望这仅在他们单击删除按钮时发生。

如何更改单击事件以仅影响删除按钮？

谢谢你。

（ps）它写在 typescript 但经过处理，所以这就是为什么有这样的过度规范。

 "use strict"; const todoListElement = document.getElementById('ordered-todo-list'); const form = document.getElementById('todo-form'); todoListElement === null || todoListElement === void 0? void 0: todoListElement.addEventListener("click", todoListEraser); function todoListEraser(event) { /* const target = event.target as HTMLElement;*/ var _a; (_a = event.target.closest('.list-item')) === null || _a === void 0? void 0: _a.remove(); } function todoListCreator() { // turn the input text into variable: const item = document.getElementById('todo-input').value; /*-------------------------------------------------template*/ const templateOfList = document.getElementById('list-item-template').content; const copyHTML = document.importNode(templateOfList, true); /*Give <p> element the textcontent of item (user input)*/ copyHTML.querySelector('.task-text').textContent = item; /*Add the template content to ordered list*/ todoListElement === null || todoListElement === void 0? void 0: todoListElement.appendChild(copyHTML); } /* prevents page from reloading on submit, and resets user input field to blank after submit.*/ form === null || form === void 0? void 0: form.addEventListener("submit", (e) => { e.preventDefault(); // resets input field to blank after user submits task const resetInput = document.getElementById('todo-input'); resetInput.value = ''; });

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <title>To do list</title> <link rel="icon" type="image/jpg" href="/images/favicon-pineapple.jpg"> </head> <body> <h1 class="title">todos</h1> <form id="todo-form" onsubmit="todoListCreator()"> <button id="scrolldown-menu-toggle">˅</button> <input type="text" id="todo-input" placeholder="Fill in your plan" maxlength="30"> </form> <template id="list-item-template"> <li id="list-item"> <input type="checkbox" class="status-toggle" name="form-checkbox"> <p class="task-text"></p> <button class="delete">X</button> </li> </template> <ol id="ordered-todo-list"> </ol> <footer class="info"> <p>Double click to edit a todo.</p> <p>Created by Thomas Brom.</p> </footer> <script src="main.js"></script> </body> </html>

Answer 1

创建一个新的 function 说，命名为“deleteNote”。 编写您的实现以删除 function 中的注释。

在<button class="delete">X</button>添加 onClick = {//在此处调用 deleteNote 方法}。

像这样的东西：

 <button class="delete" onClick = "deleteNote()">X</button>

单击删除按钮时如何获取鼠标单击事件以删除正确的列表项

问题描述

1 个解决方案

解决方案1
0 2022-08-05 13:26:12

单击删除按钮时如何获取鼠标单击事件以删除正确的列表项

问题描述

1 个解决方案

解决方案1 0 2022-08-05 13:26:12

解决方案1
0 2022-08-05 13:26:12