JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
      <div class="item">
          <input type="text" id="text" placeholder="請輸入事項...">
          <a href="#" onclick="add();">新增</a> 
      </div>
      <div class="content">
        <h2>代辦事項:</h2>
        <a href="#" onclick="sumbit();">匯出</a>
        <hr>  
      </div> 
      <ul id="event">
      </ul>
  </div>

CSS

*{
        list-style: none;
        text-decoration: none;
        padding: 0;
        margin: 0;
      }
      .wrap{
        width: 680px;
        margin: auto;
        background-color: #FFFDD0;
      }
      .item{
        display: flex;
        justify-content: center;
        margin: 10px 0;
        padding-top: 10px;
      }
      #text{
        margin-right: 10px;
        border-radius: 10px;
        text-align: center;
      }
      a:hover{
        color:#f00;
      }
      #event{
        text-align: center;
      }
      h2{
        color: #f00;
      }
      li{
        margin-top: 5px;
        font-weight: bold;
      }
      button{
        float: right;
        border: none;
        color: #808080;
        background-color: #FFFDD0;
        padding-right: 5px;
      }
      button:hover{
        color: #f00;
        cursor: pointer;
      }
      h2{
        text-align: center;
      }
      .content a{
        display: block;
        display: flex;
        justify-content: flex-end;
        padding: 5px;
      }

JavaScript

function add(){
        var text=document.getElementById('text').value;//先取得 input 表單中輸入的文字再設為變數text
        if(text==""){
            alert("請輸入事項");
        }else{
            var li=document.createElement('li');  // 設變數 li 為創造一個新元素 li
            var span=document.createElement('span'); //設變數 span 為創造一個新元素 span
            span.textContent=text; //新增變數 text 的文字內容在變數 span 裡
            var btn=document.createElement('button'); //設變數 btn 為創造一個新元素 button
            btn.textContent="刪除"; // 新增變數 btn 內的文字為刪除
            var event=document.getElementById('event'); //取得 ul 的標籤並設為變數 event
            event.append(li); //在 ul 標籤裡(變數event)新增子元素 li 
            li.append(span);  //在 li 標籤裡新增變數 span 元素和之中的文字
            li.append(btn);   //在 li 邊籤裡新增變數 btn 元素和之中的文字
            btn.onclick=del;  // btn 點擊後會觸發 del 函式
            document.getElementById('text').value="";  //讓輸入窗清空
        }
      }

      function del(){
          event.target.parentElement.remove(); //為觸發事件刪除此父層也就是 li
      }
      
      function sumbit(){
          var list=document.getElementById('event').children;
          var num=1;
          text="";
          
          for(var x of list){
              text=text+' ('+num.toString()+") "+ x.children[0].textContent; 
              num++;
          }

          alert('代辦事項:'+text); 
      }