Подтвердить удаление кода предупреждения не совсем верно

Question

Я создаю простое приложение todo в JS, и я добавил окно предупреждения, чтобы подтвердить удаление, когда usr нажимает кнопку удаления.Если пользователь нажимает «ОК», он удаляется нормально, а если «Отмена», он не удаляется, но создает под ним еще один пустой тег li.

Что-то не так с моей функцией deleteItem, но я могу 'Не могу понять, что, попытался добавить оператор else, то же самое происходит.Буду очень признателен за любую помощь с объяснением (как вы можете сказать, я новичок в JS).Спасибо!

//grab form id first
let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let OurList = document.getElementById("ourList");

 //on submit event from user, do something
ourForm.addEventListener("submit", (e) =>{
  //will prevent alert appearing on any click event around form, ONLY when submit button is clicked.
    e.preventDefault();
    //access value of user input as a test
    //console.log(ourField.value);

  //now on submit we're gonna pass the function below which is created further down and takes one argument and its value:
    if(ourField.value === ""){
      alert("Please add a task")
    }else{
      createItem(ourField.value);
    }
})

function createItem(item) {
    let createdHTML = `<li>${item} <button 
    onclick="deleteItem(this)">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", createdHTML);

  //clear the inpur field value after user input:
    ourField.value = "";

  //keep field focused after clearing 
    ourField.focus();
}

function deleteItem(itemToDelete){
    //create alert
    let result = confirm("Are you sure you want to delete?");
    if (result === true) {
    //Logic to delete the item
    itemToDelete.parentElement.remove();
    ourField.focus();
  }
}

<h1> Todo App</h1>
<form id="ourForm">
  <input id = "ourField" type="text" autocomplete="off">
  <button> Create item</button>

  <h3>To do tasks:</h3>
  <ul id="ourList">
  </ul>

Answer 1

Вы забыли закрыть тег form после кнопки, в результате чего ваш ourForm слушатель будет вызван даже для подтверждения.

//grab form id first
let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let OurList = document.getElementById("ourList");

 //on submit event from user, do something
ourForm.addEventListener("submit", (e) =>{
  //will prevent alert appearing on any click event around form, ONLY when submit button is clicked.
    e.preventDefault();
    //access value of user input as a test
    //console.log(ourField.value);

  //now on submit we're gonna pass the function below which is created further down and takes one argument and its value:
    if(ourField.value === ""){
      alert("Please add a task")
    }else{
      createItem(ourField.value);
    }
})

function createItem(item) {
    let createdHTML = `<li>${item} <button 
    onclick="deleteItem(this)">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", createdHTML);

  //clear the inpur field value after user input:
    ourField.value = "";

  //keep field focused after clearing 
    ourField.focus();
}

function deleteItem(itemToDelete){
    //create alert
    let result = confirm("Are you sure you want to delete?");
    if (result === true) {
    //Logic to delete the item
    itemToDelete.parentElement.remove();
    ourField.focus();
  }
}

<h1> Todo App</h1>
<form id="ourForm">
  <input id = "ourField" type="text" autocomplete="off">
  <button> Create item</button>
</form>

  <h3>To do tasks:</h3>
  <ul id="ourList">
  </ul>

Answer 2

Что нужно изменить, так это: сделать кнопки элементов списка типа button.По умолчанию значение кнопки type для кнопки равно submit, что отправит всю форму, что вызовет вашу проблему.

//grab form id first
let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let OurList = document.getElementById("ourList");

 //on submit event from user, do something
ourForm.addEventListener("submit", (e) =>{
  //will prevent alert appearing on any click event around form, ONLY when submit button is clicked.
    e.preventDefault();
    //access value of user input as a test
    //console.log(ourField.value);

  //now on submit we're gonna pass the function below which is created further down and takes one argument and its value:
    if(ourField.value === ""){
      alert("Please add a task")
    }else{
      createItem(ourField.value);
    }
})

function createItem(item) {
    let createdHTML = `<li>${item} <button 
    onclick="deleteItem(this)" type="button">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", createdHTML);

  //clear the inpur field value after user input:
    ourField.value = "";

  //keep field focused after clearing 
    ourField.focus();
}

function deleteItem(itemToDelete){
    //create alert
    let result = confirm("Are you sure you want to delete?");
    if (result === true) {
    //Logic to delete the item
    itemToDelete.parentElement.remove();
    ourField.focus();
  }
}

<h1> Todo App</h1>
<form id="ourForm">
  <input id = "ourField" type="text" autocomplete="off">
  <button> Create item</button>

  <h3>To do tasks:</h3>
  <ul id="ourList">
  </ul>