The delete button is duplicating when you create a second task so that you see two delete buttons fo-CodePudding

I have a to do list that is creating two delete buttons per task for the second task item, three delete buttons for the third task etc. Here is my code.

//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>

CodePudding user response：

You shouldn't create new event listeners each time you submit the form. Add the event listener only once:

//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>

CodePudding user response：

The issue is you do this each time you submit

form.addEventListener('submit', function (e) {

Also form.reset does not take a parameter.
Lastly ne need to return the data in the submit event

You should delegate and have a div per task

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>