javascript - JS 只处理一张卡而不是所有卡

Question

我正在尝试构建一个 Web 应用程序来管理任务。我在我的 HTML 中使用了烧瓶和 jinja。我添加了一个 JS 函数来在单击按钮时删除任务。但由于添加的任务是使用 jinja，所以该功能仅适用于第一个任务。我曾尝试使用 document.querySelectorAll 而不是 document.querySelector 但没有解决问题，该功能完全停止工作。这是代码。

JS

// SELECTORS
const buttons = document.querySelectorAll(".card-footer");

// EVENT LISTENERS
buttons.addEventListener("click", deleteCheck);

// FUNCTIONS
function deleteCheck(event) {
  const item = event.target;
  const todo = item.closest(".card");
  // Delete the todo
  if (item.classList[0] === "trash-btn") {
    // Animation
    todo.classList.add("fall");
    todo.addEventListener("transitionend", function () {
      todo.remove();
    });
  }

  // Mark as done
  if (item.classList[0] === "complete-btn") {
    todo.classList.toggle("completed");
  }
}

HTML

  <div class="row row-cols-1 row-cols-md-3 g-4">
    {% for i in range(0, len) %}
    <div class="col">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">{{ tasks[i][0] }}</h5>
          <p class="card-text">{{ tasks[i][1] }}</p>
        </div>
        <div class="card-footer">
          <div class="sessions">
            <small>Session(s) left: {{ tasks[i][2] }}</small>
          </div>
          <div class="action">
            <button class="complete-btn"><i class="fas fa-check"></i></button>
            <button class="trash-btn"><i class="fas fa-trash"></i></button>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

标签： javascripthtmljinja2