如何引用 bootstrap 的 className 属性？

16 浏览
0 Comments

如何引用 bootstrap 的 className 属性？

我正在制作一个待办事项列表。我想要添加两个按钮（选中和删除）。当我点击删除按钮时，我希望能删除整个列表。例如：

| 购物清单 |（选中按钮）（删除按钮）|

当我点击删除按钮时，它应该删除整个列表，就像这里的购物清单一样。

但是，我在这里使用了Bootstrap和JavaScript，当我引用className remove时，它并没有实际删除任何内容，我猜测它实际上没有引用className remove，因为我的className是remove btn btn-primary font-weight-bold float-right mt--5，因为我使用了Bootstrap。有人能告诉我我做错了什么吗？

我的代码：

const todoInput = document.querySelector(".form-control");
const todoButton = document.querySelector(".add");
const todoList = document.querySelector(".todo-list");
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
function addTodo(event) {
  event.preventDefault();
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo-item");
  const newTodo = document.createElement("h6");
  newTodo.innerText = todoInput.value;
  todoDiv.appendChild(newTodo);
  const removeButton = document.createElement("button");
  removeButton.className =
    "remove btn btn-primary font-weight-bold float-right mt--5";
  const spancontainerforremove = document.createElement("span");
  const icontainerforremove = document.createElement("i");
  icontainerforremove.className = "fas fa-trash-alt";
  spancontainerforremove.appendChild(icontainerforremove);
  removeButton.appendChild(spancontainerforremove);
  todoDiv.appendChild(removeButton);
  const completedButton = document.createElement("button");
  completedButton.className =
    "complete btn btn-primary font-weight-bold float-right mr-1 mt--5";
  const spancontainer = document.createElement("span");
  const icontainer = document.createElement("i");
  icontainer.className = "fas fa-check-circle";
  spancontainer.appendChild(icontainer);
  completedButton.appendChild(spancontainer);
  todoDiv.appendChild(completedButton);
  todoList.appendChild(todoDiv);
  todoInput.value = "";
}
function deleteCheck(e) {
  const item = e.target;
  console.log(item.className);
  if (item.className === "remove") { //不起作用
    item.remove();
  }
}

0