<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo List</title>
<!--  引入 Bootstrap  -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- 引入 jQuery -->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="container">
    <div class="card mx-auto mt-5 w-50">
      <div class="card-body">
        <h2 class="text-center">Todo List</h2>
        <div class="input-group mb-3">
          <input type="text" class="form-control input-todo" placeholder="新增待辦事項...">
          <div class="input-group-append">
            <button class="btn btn-dark btn-add" type="button" id="button-addon2">新增</button>
          </div>
        </div>
        <ul class="list-group todos">
          <!-- todo -->
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
// 新增功能 
$('.btn-add').click(() => {
      const content = $('.input-todo').val();
      if (!content) return;
      $('.input-todo').val('');
      $('.todos').append(`
        <li class="todo list-group-item d-flex justify-content-between align-items-center">
          <div class="todo-title ">${content}</div>
          <div class="btn-group">
            <button class="btn-undone btn btn-outline-secondary" type="submit">未完成</button>
            <button class="btn-delete btn btn-outline-danger" type="submit">刪除</button>
          </div>
        </li>
      `
      );
    });

// 刪除功能
    $('.todos').on('click', '.btn-delete', e => {
      $(e.target).parents('.todo').remove();
    });

// 切換已完成或未完成
    $('.todos').on('click', '.btn-undone', e => {
      const todo = $(e.target).parent();
      e.target.remove();
      todo.prepend(`
        <button class="btn-done btn btn-outline-success" type="submit">已完成</button>
      `)
    }); 

    $('.todos').on('click', '.btn-done', e => {
      const todo = $(e.target).parent();
      e.target.remove();
      todo.prepend(`
      <button class="btn-undone btn btn-outline-secondary" type="submit">未完成</button>
    `)
    });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.