JSFiddle - React, Tailwind, and code Playground

HTML

<div id='app'>
  <span class='title'>待辦事項管理</span>
  <br/>
  <div id='top'>
    <input id='input'/>
    <button onClick="openInput()">+</button>
  </div>
  
  <ul id='ul'></ul>
 

</div>

CSS

body{
  background:#fffda7
}
#app{
    margin: 3rem;
    justify-content: center;
    display: grid;
}
.title{
  text-align:center;
  color:green;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}
#input{
   border: 3px solid green;
   margin-right: -5px;
}
button{
  color: white;
  background: green;
  width: fit-content;
  padding: 3px 6px;
  margin: 0px;
  border: 1px solid green;
}
ul{
     color:green;
     display: contents;
}
span{
     color:green;
}
li{
  background: yellow;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

JavaScript

function clickFunc(event) {
  const li = event.target.parentElement
  console.log('li  ==> ', li)
  const spanli = li.querySelector('span').textContent
   const text =  confirm(`確定刪除? ${spanli}`)
   if(text){
        li.remove()
     
   }


}

function openInput() {
  const input = document.getElementById('input');
  if(!input.value){
   alert('請填寫待辦事項')
   	return;
  }


  const ul = document.getElementById('ul');


  const li = document.createElement('li');
  const btn = document.createElement('button');
  btn.textContent = 'X';
  btn.onclick = clickFunc


  const span = document.createElement('span');
  span.textContent = input.value;
  ul.append(li)
  li.append(span)
  li.append(btn)
  
  /* ul.append(li, span, btn) */
	  
  input.value = ''


}