Блог

Главная - Вопросы по программированию - Кнопка удаления в списке дел (HTML / JS)

Кнопка удаления в списке дел (HTML / JS)

#javascript #html #css

#javascript #HTML #css

Вопрос:

Недавно я начал изучать html / css / javascript. Хотя я знаю некоторые базовые вещи, мне все еще трудно понять некоторые части сценария. Я создал список дел, но он еще не завершен. Я хотел бы добавить кнопку, которая удаляет задачу, но она не работает. Может ли кто-нибудь помочь мне с частью скрипта кнопки удаления и объяснить в нескольких словах, как это должно работать? Эта кнопка все портит, я пытаюсь исправить это в течение пяти часов, но она все еще не работает.

Вот мой HTML-код :

 <!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>
          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>

Ответ №1:

Это должно решить вашу проблему. Я добавил прослушиватель событий к кнопке удаления, затем нашел родительский элемент по щелчку и затем удалил его.

 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>

Ответ №2:

Просто добавьте событие onclick remove() в свой const todoDelete = document.createElement("button"); 

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

Теперь, чтобы объяснить, как это работает:
Кнопка — это, родительский узел — элемент выше, весь элемент TODO находится на два уровня выше и remove() удалит этот.

(Это ваша текущая структура, она зависит от нее)

 <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>

Комментарии:

1. Я бы не рекомендовал использовать parentNode дважды подобным образом. Это означает, что javascript зависит от структуры html, которая сломается, если html изменится.

2. Да, я прояснил это, добавив структуру и упомянув ее.