index.hbs

<div class="row">
  <div class="col-12 mt-2">
    <button class="btn btn-light btn-block dropdown-toggle text-right" type="button" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false">
      類別
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      {{#each category }}
      <a class="dropdown-item" href="/sort/{{this.name}}">{{this.name}}</a>
      {{/each}}
      <a class="dropdown-item" href="/">總表</a>
    </div>
  </div>
</div>
<div class="row justify-content-start mt-2">
  <div class="col-3">
    <span style="font-size: 2em;">總金額 :</span>
  </div>
  <div class="col-9">
    <span style="font-size: 5em;">{{total}}</span>
  </div>
</div>
<ul class="list-group mt-2 wrapping">
  {{#each record}}
  <li class="list-group-item">
    <div class="row justify-content-between ">
      <div class="col-1 align-self-center">
        <span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="{{this.description}}">
          <i class="{{this.icon}} fa-2x ml-3 align-self-center" :hover></i>
        </span>
      </div>
      <div class="col-11 row justify-content-between">
        <div class="col-4 align-self-center">
          <div class="row">
            <div class="col-12">{{this.name}}</div>
            <div class="col-12">{{this.date}}</div>
          </div>
        </div>
        <span class="align-self-center">
          <h5>{{this.amount}}</h5>
        </span>
        <div class="col-6">
          <div class="row justify-content-end">
            <a type="button" class="btn btn-success mr-2" href="/record/{{this._id}}/edit">修改</a>
            <button class="btn btn-danger mt-1 mt-sm-0 mr-2 card-delete-btn" data-toggle="modal" type="button"
              data-target="#exampleModal" data-id="{{this._id}}" data-name="{{this.name}}"
              data-icon="{{this.icon}}">刪除</button>
          </div>
        </div>
      </div>
    </div>
  </li>
  {{/each}}
</ul>
<div class="row justify-content-center mt-2">
  <a type="button" class="btn btn-info" href="/record/create">新增支出</a>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row justify-content-round">
          <div class="col-8">
            <h5 class="modal-title" id="exampleModalLabel">確認刪除:</h5>
          </div>
          <div class="col-4">
            <div class="row justify-content-end" id="buttons">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const wrapping = document.querySelector('.wrapping')

  function deletePrompt(e) {
    if (e.target.matches('.card-delete-btn')) {
      const buttons = document.querySelector('#buttons')
      buttons.innerHTML = `
     <form action="/record/${e.target.dataset.id}?_method=DELETE" method="POST">
      <button class="btn btn-danger mt-1 mt-sm-0 mr-2" type="submit">刪除</button>
    </form>
    <button type="button" class="btn btn-secondary mr-2" data-dismiss="modal">返回</button>
  `
      document.querySelector('#exampleModalLabel').innerHTML = `
    確認刪除: <i class="${e.target.dataset.icon} fa-2x ml-3 align-self-center"></i> ${e.target.dataset.name}
    `
    }
  }


  wrapping.addEventListener('click', deletePrompt)
</script>