JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

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

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

JavaScript

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

render();

function render(){
   const root = document.querySelector('#root');
   root.textContent = "";

   let ul = document.createElement('ul');
   for( let x in todos){
      let todo = todos[x];
      let li = document.createElement('li');
      let span = document.createElement('span');
      let delBtn = document.createElement('button');
      delBtn.onclick = () => {
         console.log(x);
         todos.splice(x, 1)
         render();
      };
      span.textContent = todo.title;
      delBtn.textContent = "刪除";
      li.append(span);
      li.append(delBtn);
      ul.append(li);
   }
      root.append(ul);
}

function add(){
   let input = document.querySelector('input');
   let text = input.value;
   todos.push({title: text});
   render();
   input.value = "";
}