我想问一下如何添加到eventListener删除项目(通过访问其类(使该项在另一个中可见的函数放置在网站上。
代码：
const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
const generateTemplate = todo => {
const html = `
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>${todo}</span>
<i class="far fa-trash-alt delete"></i>
</li>`;
list.innerHTML += html;
};
addForm.addEventListener('submit', e => {
e.preventDefault();
const todo = addForm.add.value.trim();
if (todo.length) {
generateTemplate(todo);
addForm.reset();
}
});
list.addEventListener('click', e => {
console.log(e);
if (e.target.classList.contains('delete')) {
// how to add here the function which apart from deleting the item
//can show in the other place (somewhere below)
e.target.parentElement.remove();
}
});body {
background: #2a0fd7;
;
}
.container {
max-width: 400px;
}
input[type=text],
input[type=text]:focus {
color: #fff;
border: none;
background: rgba(0, 0, 0, 0.2);
max-width: 400px;
}
.todos li {
background: #6c6788;
}
.delete {
cursor: pointer;
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="text-center text-light my-4">
<h1 class="mb-4"></h1>
</header>
<ul class="list-group todos mx-auto text-light">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>play mariokart</span>
<i class="far fa-trash-alt delete"></i>
</li>
</ul>
<form class="add text-center my-4">
<label class="text-light">Add a new todo...</label>
<input class="form-control m-auto" type="text" name="add" />
</form>
<script src="app.js"></script>
</body>
</html>您在<script src="app.js"></script>之前缺少结束标记</div>