CODEWITHSUNDEEP
javascripthtmlcss
Sajko
Sajko

Reputation: 41

Delete button in To Do List (HTML/JS)

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>

Upvotes: 4

Views: 959

Answers (2)

Morgosus
Morgosus

Reputation: 827

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>

Upvotes: 1

dantheman
dantheman

Reputation: 3814

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>

Upvotes: 1

Related Questions