我的删除函数有问题。在再次按下提交按钮之前，我只能删除一行。我似乎只能删除提交的第一段。感觉eventListener只适用于第一行。我这里需要一个环吗？
这是我的一些代码：
// Manipulation with DOM
const submitButton = document.getElementById('submit-btn');
const inputText = document.getElementById('input-text');
const showcaseUlList = document.getElementById('showcase-ul-list');
const showcaseLilist = document.getElementById('showcase-li-list');
// Submit event listener
submitButton.addEventListener('click', submitAddToDo);
// Submit function
function submitAddToDo(){
// Checking if the input is not empty
if(inputText.value === ''){
alert("You've must fill the input field");
return;
}
// Create div
const divToDo = document.createElement('div');
divToDo.classList.add('showcase-li-list');
// Create li
const liToDo = document.createElement('li');
// Create button(check)
const checkToDo = document.createElement('button');
checkToDo.innerHTML = '<i class="fas fa-check-circle id="check-checked"></i>';
// Create paragraph
const pToDo = document.createElement('p');
let inputValue = inputText.value;
pToDo.innerHTML = inputValue;
// Create i(trash)
const trashToDo = document.createElement('button');
trashToDo.classList.add('trash');
trashToDo.innerHTML = '<i class="fas fa-trash trash" id="trash-delete"></i>'
// All childs appends
showcaseUlList.appendChild(divToDo);
divToDo.appendChild(liToDo);
liToDo.appendChild(checkToDo);
liToDo.appendChild(pToDo);
liToDo.appendChild(trashToDo);
// Clear input field and delete show line
inputText.value = '';
showcaseLilist.remove();
// Remove task
const trashDelete = document.getElementById('trash-delete');
trashDelete.addEventListener('click', removeTask);
const removeParent = trashDelete.parentElement.parentElement.parentElement;
function removeTask(){
removeParent.remove();
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<body>
<div class="container">
<!-- Header - welcome section -->
<header class="welcome-section">
<div class="welcome-text">
<h1>Welcome,</h1>
<p>Here you can make your own task manager</p>
<p class="text-xs">feel free to try it out!</p>
</div>
<img src="../IMG/todo-header.png" alt="" class="header-image">
</header>
<!-- Input section -->
<section class="input-section">
<p class="text-lg">Fill your task manager with tasks:</p>
<input type="text" id="input-text" class="input-text">
<button class="btn-lg" id="submit-btn">Submit</button>
</section>
<!-- Showcase -->
<div class="showcase">
<ul id="showcase-ul-list">
<div class="showcase-li-list" id="showcase-li-list">
<li>
<button><i class="fas fa-check-circle check" id="check-checked"></i></button>
<p>Fill your task manager</p>
<button class="trash"><i class="fas fa-trash" id="trash-delete"></i></button>
</li>
</div>
</ul>
</div>
</div>
</body>使用trashToDo.addEventListener而不是trashDelete.addEventListener。此外，您不需要获得removeParent。在removeTask中使用divToDo.remove();。
您的代码出现问题是由于document.getElementById('trash-delete')。getElementById将始终找到id为trash-delete的first元素。并且您只将事件分配给第一个元素。所以它总是为你删除第一个。
// Remove task
// const trashDelete = document.getElementById('trash-delete'); <-- Remove this line
trashToDo.addEventListener('click', removeTask);
// Remove below line.
// const removeParent = trashDelete.parentElement.parentElement.parentElement;
function removeTask() {
divToDo.remove();
}