JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<button onclick="add()">新增事項</button>
<div id="root">

CSS

ul{
  list-style: none;
}

JavaScript

const root=document.querySelector("#root");
let todos = [
  {
    title: "倒垃圾"
  },
  {
    title: "繳電話費"
  },
  {
    title: "採買本週食材"
  },
];
function render(){
  root.innerHTML="";
  for(let index in todos){
    let ul=document.createElement("ul");
    let li=document.createElement("li");
    let span=document.createElement("span");
    let deleteBtn=document.createElement("button");
    root.append(ul);
    ul.append(li);
    li.append(span)
    li.append(deleteBtn);
    span.textContent=todos[index].title;
    deleteBtn.textContent="刪除";
    deleteBtn.onclick=()=>{
      console.log(index);
      console.log(todos);
      todos.splice(index, 1);
      render();
    }
  }
}
function add(){
  let event=document.querySelector("[type=text]");
  todos.push({title: event.value});
  render();
  event.value="";
}
render();