JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var todos = [
  {
    title: "倒垃圾"
  },
  {
    title: "繳電話費"
  },
  {
    title: "採買本週食材"
  },
];

function render()
{	
	var root=document.querySelector("#root");
	root.textContent="";
	
	var allist=document.createElement("ul");
	
	for(var x in todos){
		
		var list=document.createElement("li");
		
		var item=document.createElement("span");
		item.textContent=todos[x].title;
		
		var deletebtn=document.createElement("button");
		deletebtn.textContent="Delete";

		deletebtn.x = x;
		deletebtn.onclick = () => {
			console.log(parseInt(event.target.x));
			todos.splice(parseInt(event.target.x), 1);
			render();
		};
		
		allist.append(list);
		list.append(item);
		list.append(deletebtn);
	}
	console.log(root);
	root.append(allist);
	
}

render();

function add()
{	
	var input=document.querySelector("input");
	todos.push({title:input.value});
	console.log(todos);
	render();
}