Create, delete and display task list

by yoyosan

HTML

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

JavaScript

let root = document.querySelector('#root');
let todos = [{title: "倒垃圾"},{title: "繳電話費"},{title: "採買本週食材"}];

let render = () => {
  root.textContent = '';
  for (let index in todos) {
    let ul = document.createElement('ul');
    let li = document.createElement('li');
    ul.append(li);
    let span = document.createElement('span');
    span.textContent = todos[index].title;
    let debutton = document.createElement('button');
    debutton.textContent = '刪除';
    li.append(span);
    li.append(debutton);
    root.append(ul);

    debutton.onclick = () => {
      todos.splice(index, 1);
      render();

    }


  }
}


function add(){
  let item = document.querySelector('#item').value;
  todos.push({title:item});
  render();

}


render();