Do to List Js

hmtl part
<h1>To Do List</h1>

<form id="ourForm" action="">
  <input id="ourField" type="text" autocomplete="off">
  <button>Create Item</button>
</form>

<h3 id="bla">Need To Do</h3>
  <ul id="ourList">
  </ul>



//Javaskript part
let ourForm = document.getElementById("ourForm")
let ourField = document.getElementById("ourField")
let ourList = document.getElementById("ourList")

ourForm.addEventListener("submit", (e) => { //e reiskia event turinys kuris bus nusiustas o bendrai cia arrow function panaudota
  e.preventDefault() //si funkcija yra tam kad nebutu error spaudziant create item nes infor kazkur bus sunciama
  createItem(ourField.value)
} )

function createItem(x){
  let ourHTML = `<li> ${x} <button onclick="deleteItem(this)">Delete</button></li>` //yra skirtumas kokias kabutes deti, tinka tos kur prie Esc i sona
  ourList.insertAdjacentHTML("beforeend", ourHTML)
  ourField.value = "" //padaro kad butu tuscia
  ourField.focus() //padaro kad butu autofocusas ir galima butu rasyti iskarto inpute
}

//delete part
function deleteItem(elementToDelete) { //ten kur yra js / let ourHTML prie button mes prirasom onclick='deleteItem()' funkcija
  elementToDelete.parentElement.remove()
}