I am having trouble a todo list app. I have a user submitting input and displaying this in a bar onscreen.
on submit the user gets a bar with:
.done (toggle button) .their own input as a 'string' .a delete button with which to delete the entry they choose.
right now when the user clicks anywhere in the bar, it deletes the entry. i want this to only happen when they click the delete button.
how do i change the click event to only affect the delete button?
Thank you.
(p.s.) its written in typescript but processed, so thats why theres such over specification.
"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>