以下事件处理程序捕获
全部的
单击车身:
document.body.addEventListener('click', deleteTask);
因此,当您在
deleteTask
功能您还可以阻止其他按钮上的默认操作,包括“添加任务”按钮。
既然你已经检查了点击的目标,你也应该
只有
在这种情况下防止默认的单击操作:
function deleteTask(e) {
if (e.target.classList.contains('fa-remove')) {
e.target.parentElement.parentElement.remove();
e.preventDefault(); // Move preventDefault here
}
}
const task = document.querySelector('#task');
const form = document.querySelector('#task-form');
const ul = document.querySelector('ul');
form.addEventListener('submit', newTask);
document.body.addEventListener('click', deleteTask);
function newTask(e) {
if (task.value) {
let li = document.createElement('li');
li.className = "collection-item";
li.appendChild(document.createTextNode(task.value));
let href = document.createElement('a');
href.className = "delete-item secondary-content";
href.innerHTML = '<i class="fa fa-remove"></i>';
href.setAttribute('href', '#');
li.appendChild(href);
ul.appendChild(li);
} else {
alert('Please type something');
}
e.preventDefault();
form.reset();
}
function deleteTask(e) {
if (e.target.classList.contains('fa-remove')) {
e.target.parentElement.parentElement.remove();
e.preventDefault();
}
//
}
<body>
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-content">
<span class="card-title">Task List</span>
<div class="row">
<p style="background-color:red;color:white;text-align:center" id="error"></p>
<form id="task-form">
<div class="input-field col s12">
<input type="text" name="task" id="task">
<label for="task">New Task</label>
</div>
<input type="submit" value="Add Task" class="btn">
</form>
</div>
<div class="card-action">
<h5 id="task-title">Tasks</h5>
<ul class="collection">
<li class="collection-item">
List Item
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
List Item
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
List Item
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
List Item
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
List Item
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<button class="btn black" id="clear-tasks">Clear Tasks</button>
</div>
</div>
</div>
</div>
</div>
