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

【问题标题】：How to get mouseclick event to remove correct list item when click delete button单击删除按钮时如何获取鼠标单击事件以删除正确的列表项
【发布时间】：2022-08-05 21:26:12
【问题描述】：

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

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

.done（切换按钮） .他们自己的输入作为 \'string\' .一个删除按钮，用于删除他们选择的条目。

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

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

谢谢你。

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

\"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>

标签： javascript html

【解决方案1】：

创建一个名为“deleteNote”的新函数。编写您的实现以删除该函数中的注释。

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

像这样的东西：

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

【讨论】：