Delete button in To Do List (HTML/JS)

Question

Recently, I've started to learn html/css/javascript. Although I know some basic stuff I still struggle with understanding some of the script parts. I 've created a To Do List but its not finished yet. I'd like to add a button that deletes task but it does not work. Can someone help me with delete button script part and explain in few words how it should work? This button is ruining everything, I am trying to fix it for five hours but it still doesn't work.

Here is my html code :

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./style1.css" />
      </head>
      <body>
        <div class="todo-cat">
          <form class="todo-form" id="todoForm">
            <div class="todo-form-row">
              <label class="todo-form-label" for="todoMessage"
                >Podaj treść zadania</label
              >
              <textarea
                class="todo-form-message"
                name="todoMessage"
                id="todoMessage"
              ></textarea>
            </div>
            <div class="todo-form-row">
              <button type="submit" class="button todo-form-button">Dodaj</button>
            </div>
          </form>
    
          <section class="todo-list-cat">
            <header class="todo-list-header">
              <h2 class="todo-list-title">Lista zadań</h2>
              <form class="todo-list-search form">
                <input type="search" id="todoSearch" class="todo-list-search" />
              </form>
            </header>
    
            <div class="todo-list" id="todoList"></div>
          </section>
        </div>

And here is Script part :

        <script>
          let todoList = null;
          let todoForm = null;
          let todoSearch = null;
    
          function addTask(text) {
            //element todo
            const todo = document.createElement("div");
            todo.classList.add("todo-element");
    
            //belka gorna
            const todoBar = document.createElement("div");
            todoBar.classList.add("todo-element-bar");
    
            //data w belce
            const todoDate = document.createElement("div");
            todoDate.classList.add("todo-element-var");
            const date = new Date();
            const dateText = `${date.getDate()} - ${
              date.getMonth() + 1
            } - ${date.getFullYear()} godz.: ${date.getHours()}:${date.getMinutes()}`;
            todoDate.innerText = dateText;
    
            //przycisk usuwania
            const todoDelete = document.createElement("button");
            todoDelete.classList.add("todo-element-delete");
            todoDelete.classList.add("button");
            todoDelete.innerHTML = `<i class="fas fa-times-circle"></1>`;
    
            //wrzucamy elementy do belki
            todoBar.appendChild(todoDate);
            todoBar.appendChild(todoDelete);
    
            //element z tekstem
            const todoText = document.createElement("div");
            todoText.classList.add("todo-element-text");
            todoText.innerHTML = text;
    
            //łączymy całość
            todo.appendChild(todoBar);
            todo.appendChild(todoText);
    
            //wrzucamy do listy
            todoList.append(todo);
          }
    
          document.addEventListener("DOMContentLoaded", () => {
            todoList = document.querySelector("#todoList");
            todoForm = document.querySelector("#todoForm");
            todoSearch = document.querySelector("todoSearch");
    
            todoForm.addEventListener("submit", (e) => {
              e.preventDefault();
              const textarea = todoForm.querySelector("textarea");
              if (textarea.value != "") {
                addTask(textarea.value);
                textarea.value = "";
              }
            });
          });
        </script>
        <script
          defer
          src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"
        ></script>
      </body>
    </html>

dantheman · Accepted Answer · 2020-09-03 12:23:23Z

This should fix your problem. I've added an event listener to the delete button, then found the parent element on click and then removed it.

let todoList = null;
let todoForm = null;
let todoSearch = null;

function addTask(text) {
  //element todo
  const todo = document.createElement("div");
  todo.classList.add("todo-element");

  //belka gorna
  const todoBar = document.createElement("div");
  todoBar.classList.add("todo-element-bar");

  //data w belce
  const todoDate = document.createElement("div");
  todoDate.classList.add("todo-element-var");
  const date = new Date();
  const dateText = `${date.getDate()} - ${
  date.getMonth() + 1
  } - ${date.getFullYear()} godz.: ${date.getHours()}:${date.getMinutes()}`;
  todoDate.innerText = dateText;

  //przycisk usuwania
  const todoDelete = document.createElement("button");
  todoDelete.classList.add("todo-element-delete");
  todoDelete.classList.add("button");
  todoDelete.innerHTML = `delete`;

  todoDelete.addEventListener("click", function() {
    this.closest(".todo-element").remove()
  });

  //wrzucamy elementy do belki
  todoBar.appendChild(todoDate);
  todoBar.appendChild(todoDelete);

  //element z tekstem
  const todoText = document.createElement("div");
  todoText.classList.add("todo-element-text");
  todoText.innerHTML = text;

  //łączymy całość
  todo.appendChild(todoBar);
  todo.appendChild(todoText);

  //wrzucamy do listy
  todoList.append(todo);
}

document.addEventListener("DOMContentLoaded", () => {
  todoList = document.querySelector("#todoList");
  todoForm = document.querySelector("#todoForm");
  todoSearch = document.querySelector("todoSearch");

  todoForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const textarea = todoForm.querySelector("textarea");
    if (textarea.value != "") {
      addTask(textarea.value);
      textarea.value = "";
    }
  });
});

<div class="todo-cat">
  <form class="todo-form" id="todoForm">
    <div class="todo-form-row">
      <label class="todo-form-label" for="todoMessage">Podaj treść zadania</label
        >
      <textarea
                class="todo-form-message"
                name="todoMessage"
                id="todoMessage"
                ></textarea>
    </div>
    <div class="todo-form-row">
      <button type="submit" class="button todo-form-button">Dodaj</button>
    </div>
  </form>

  <section class="todo-list-cat">
    <header class="todo-list-header">
      <h2 class="todo-list-title">Lista zadań</h2>
      <form class="todo-list-search form">
        <input type="search" id="todoSearch" class="todo-list-search" />
      </form>
    </header>

    <div class="todo-list" id="todoList"></div>
  </section>
</div>

Morgosus · Accepted Answer · 2020-09-03 14:05:20Z

Just add an onclick remove() event under your const todoDelete = document.createElement("button");

todoDelete.onclick = function () {
    this.parentNode.parentNode.remove();
};

Now to explain how it works: The button is 'this', the parentNode is the element above, the entire TODO item is two layers above and remove() will delete that one.

(This is your current structure, it is dependent on it)

<div class="todo-element">
    <div class="todo-element-bar">
       <div class="todo-element-var">3 - 9 - 2020 godz.: 14:28</div>
       <button class="todo-element-delete button">BUTTON IS HERE</button>
    </div>
    <div class="todo-element-text">zrdz</div>
</div>

let todoList = null;
          let todoForm = null;
          let todoSearch = null;
    
          function addTask(text) {
            //element todo
            const todo = document.createElement("div");
            todo.classList.add("todo-element");
    
            //belka gorna
            const todoBar = document.createElement("div");
            todoBar.classList.add("todo-element-bar");
    
            //data w belce
            const todoDate = document.createElement("div");
            todoDate.classList.add("todo-element-var");
            const date = new Date();
            const dateText = `${date.getDate()} - ${
              date.getMonth() + 1
            } - ${date.getFullYear()} godz.: ${date.getHours()}:${date.getMinutes()}`;
            todoDate.innerText = dateText;
    
            //przycisk usuwania
            const todoDelete = document.createElement("button");
            
            todoDelete.onclick = function () {
                this.parentNode.parentNode.remove();
            };
            
            todoDelete.classList.add("todo-element-delete");
            todoDelete.classList.add("button");
            todoDelete.innerHTML = `<i class="fas fa-times-circle"></1>`;
    
            //wrzucamy elementy do belki
            todoBar.appendChild(todoDate);
            todoBar.appendChild(todoDelete);
    
            //element z tekstem
            const todoText = document.createElement("div");
            todoText.classList.add("todo-element-text");
            todoText.innerHTML = text;
    
            //łączymy całość
            todo.appendChild(todoBar);
            todo.appendChild(todoText);
    
            //wrzucamy do listy
            todoList.append(todo);
          }
    
          document.addEventListener("DOMContentLoaded", () => {
            todoList = document.querySelector("#todoList");
            todoForm = document.querySelector("#todoForm");
            todoSearch = document.querySelector("todoSearch");
    
            todoForm.addEventListener("submit", (e) => {
              e.preventDefault();
              const textarea = todoForm.querySelector("textarea");
              if (textarea.value != "") {
                addTask(textarea.value);
                textarea.value = "";
              }
            });
          });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./style1.css" />
</head>

<body>
  <div class="todo-cat">
    <form class="todo-form" id="todoForm">
      <div class="todo-form-row">
        <label class="todo-form-label" for="todoMessage">Podaj treść zadania</label
              >
              <textarea
                class="todo-form-message"
                name="todoMessage"
                id="todoMessage"
              ></textarea>
            </div>
            <div class="todo-form-row">
              <button type="submit" class="button todo-form-button">Dodaj</button>
            </div>
          </form>
    
          <section class="todo-list-cat">
            <header class="todo-list-header">
              <h2 class="todo-list-title">Lista zadań</h2>
              <form class="todo-list-search form">
                <input type="search" id="todoSearch" class="todo-list-search" />
              </form>
            </header>
    
            <div class="todo-list" id="todoList"></div>
          </section>
        </div>
        <script
          defer
          src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"
        ></script>
      </body>
    </html>

I wouldn't recommend using parentNode twice like that. That means the javascript is dependent on the html structure, which would break if the html changes.
Yes, I made that clear, by adding the structure and mentioning it.

Collectives™ on Stack Overflow

Delete button in To Do List (HTML/JS)

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related