0

I am making a to-do list. I am trying to add two buttons (checked and delete). When I click on the delete button I want to delete the entire list. For example:

| Grocery shopping| (Checked button) (delete button) |

When I click on the delete button it should delete the whole list as in here (grocery shopping)

But, I am using bootstrap here with javascript and when I refer to className remove here it doesn't actually delete anything and I assume it's not actually referring to the className remove since my className is remove btn btn-primary font-weight-bold float-right mt--5 since I am using bootstrap, Can anyone tell me what am I doing wrong?

My code: 

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") { //does not work
    item.remove();
  }
}
Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
iachi
  • 115
  • 2
  • 11
  • `.className` is what React uses to set classes. You need to stick to `.class`. To test whether an element has a certain class, use `element.classList.contains("remove")` –  May 20 '20 at 06:40
  • @ChrisG That is incorrect. `class` is a reserved word and `.className` is used by vanilla JS - it contains the whole "`class="...."` string so correctly assumed by iachi – mplungjan May 20 '20 at 06:43
  • @iachi, you need to use the [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) interface to remove and add and toggle your classes instead of manipulating the className string – mplungjan May 20 '20 at 06:46
  • @mplungjan Oh, I had no idea! Apologies for that. I assume the 2nd part of my comment is correct though? –  May 20 '20 at 06:46
  • @ChrisG Yes indeed – mplungjan May 20 '20 at 06:47
  • i really suggest to use something like react, or maybe jquery – Giuppox May 20 '20 at 06:48
  • So the answer to your question is `function deleteCheck(e) { const tgt = e.target; if (tgt.classList.contains("remove") { tgt.closest("div").remove(); /* remove the parent */ } }` – mplungjan May 20 '20 at 06:55
  • @mplungjan If I do that it removes all the css from my buttons. Not sure why it does so – iachi May 20 '20 at 08:20
  • The code I posted did not remove any CSS, only the div – mplungjan May 20 '20 at 08:22
  • I mean when I load the page and add the to-do list (before even clicking the delete button) I can't see css on those buttons @mplungjan – iachi May 20 '20 at 08:34
  • 1
    Nvm, it's working. Thanks – iachi May 20 '20 at 08:41

0 Answers0