我有一个待办事项列表，为第二个任务项为每个任务创建两个删除按钮，为第三个任务创建三个删除按钮，等等。这是我的代码。
//Submits the form
function submitForm() {
form.addEventListener('submit', function (e) {
e.preventDefault();
taskData = document.getElementById('activity').value;
addingTask(taskData);
form.reset(taskData);
return taskData;
});
}
//Adds a task element
function addingTask(taskData) {
taskElement = document.createElement('h3');
deleteButton = document.createElement('Button');
taskElement.innerHTML = taskData;
taskElement.id = 'taskElement';
deleteButton.innerHTML = 'Delete';
//deleteButton.id = taskData;
deleteButton.addEventListener('click', deletingTask);
document.body.appendChild(taskElement);
document.body.appendChild(deleteButton);
}
//Removes a task element
function deletingTask() {
taskElement.remove();
deleteButton.remove();
}<body>
<form id="form"> <label for="activity">Activity</label><br> <input type="text" id="activity"
name="activity"><br><br> <input type="submit" value="Submit" onclick="submitForm()"> </form>
<!-- your content here... -->
<script src="script.js"></script>
</body>
您不应该在每次提交表单时创建新的事件侦听器。仅添加一次事件侦听器：
//Submits the form
form.addEventListener('submit', function (e) {
e.preventDefault();
taskData = document.getElementById('activity').value;
addingTask(taskData);
form.reset(taskData);
return taskData;
});
//Adds a task element
function addingTask(taskData) {
taskElement = document.createElement('h3');
deleteButton = document.createElement('Button');
taskElement.innerHTML = taskData;
taskElement.id = 'taskElement';
deleteButton.innerHTML = 'Delete';
//deleteButton.id = taskData;
deleteButton.addEventListener('click', deletingTask);
document.body.appendChild(taskElement);
document.body.appendChild(deleteButton);
}
//Removes a task element
function deletingTask() {
taskElement.remove();
deleteButton.remove();
}<form id="form">
<label for="activity">Activity</label><br> <input type="text" id="activity" name="activity">
<br><br>
<input type="submit" value="Submit">
</form>
问题是你每次提交时都要这么做
form.addEventListener('submit', function (e) {
也是形式。重置不接受参数
最后，您需要在提交事件中返回数据
您应该委派任务并为每个任务分配一个div
const container = document.getElementById("container");
//Submits the form
form.addEventListener('submit', function(e) {
e.preventDefault();
taskData = document.getElementById('activity').value;
addingTask(taskData);
this.reset();
});
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("delete")) {
//Removes a task element
tgt.closest("div").remove();
}
})
//Adds a task element
function addingTask(taskData) {
const taskElement = document.createElement('div');
const header = document.createElement('h3');
deleteButton = document.createElement('Button');
header.innerHTML = taskData;
deleteButton.innerHTML = 'Delete';
deleteButton.classList.add("delete");
taskElement.appendChild(header);
taskElement.appendChild(deleteButton);
container.append(taskElement);
}<form id="form">
<label for="activity">Activity</label>
<input type="text" id="activity" name="activity">
<input type="submit" value="Submit">
<div id="container"></div>
</form>