Tengo una lista de tareas que está creando dos botones de eliminación por tarea para el segundo elemento de la tarea, tres botones de eliminación para la tercera tarea, etc. Aquí está mi código.
//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>No debe crear nuevos detectores de eventos cada vez que envía el formulario. Agregue el detector de eventos solo una vez:
//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>El problema es que haces esto cada vez que envías
form.addEventListener('submit', function (e) { Además, form.reset no toma un parámetro.
Por último, es necesario devolver los datos en el evento de envío.
Debes delegar y tener un div por tarea
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>