JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">

<input id="keyword" type="text" placeholder="請輸入代辦事項"/>
<button onclick="myFunction()">新增</button>

</div>


<div>
  <ul id="todoul">

  </ul>
</div>

JavaScript

function myFunction() {

let todotext = document.getElementById('keyword').value; 
let ultodo = document.getElementById("todoul")
let li = document.createElement('li'); 
let span1 = document.createElement('span'); 
let del = document.createElement('button');

span1.textContent = todotext;//剛剛取得的input事項放進去
   
ultodo.append(li);
li.append(span1,del);
del.textContent = 'X';
del.onclick = removeFunction;
}

function removeFunction() {
 event.target.parentElement.remove();
}