JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">
  <!-- 內容 -->
</div>

CSS

ul{
    margin: 0;
    padding: 0;
}

li{
    list-style-type: none;
}

JavaScript

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



function render() {

  //To-do List -> TDL 參數名稱

  const root = document.querySelector('#root'); //內容顯示區域
  root.textContent = ""; //清空root

  const TDL_input = document.createElement('input'); //input_todos
  TDL_input.setAttribute('id', 'input_todos');
  root.append(TDL_input);

  const TDL_addbtn = document.createElement('button'); //button_addtodos
  TDL_addbtn.textContent = 'add';
  TDL_addbtn.onclick = add;
  root.append(TDL_addbtn);

  const TDL_ul = document.createElement('ul');
  root.append(TDL_ul);

  for (const index in todos) {

    const TDL_li = document.createElement('li');

    const TDL_del_btn = document.createElement('button'); //刪除li按鈕
    TDL_del_btn.textContent = '刪除';
    TDL_del_btn.onclick = () => {

      todos.splice(index, 1);

      render();
    }

    TDL_ul.append(TDL_li);

    TDL_li.textContent = todos[index].title;

    TDL_li.append(TDL_del_btn);
  }
}


function add() {
  const input_todos = document.querySelector('#input_todos');

  todos.push({
    title: input_todos.value
  });

  render();
}



render();