JS. Как удалить элемент из LocalStorage в приложении ToDo

Question

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>MyToDoApp</title>
      <script defer src="./main.js"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>
    <body>
      <div class="small-cont">
        <h1>My To-do's</h1>
      </div>
    </body>
    </html>

Элемент списка

//Создаю элементы
var form = document.createElement('form');
var input = document.createElement('input');
var ul = document.createElement('ul');
ul.classList.add('list-group');
var li = document.createElement('li');
var btnGroup = document.createElement('div');
var delBtn = document.createElement('button');
//Обращаюсь к хранилищу
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []
localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))
//Создание поля ввода
function createElements() {
  let smallCont = document.querySelector('.small-cont');
  form.classList.add('input-group', 'mb-3');
  input.classList.add('form-control');
  input.placeholder = ('Введите название нового дела');
  smallCont.append(form);
  form.append(input);
  smallCont.append(ul);
}
createElements();
//Создание отдельного пункта списка с кнопкой "Удалить", которая не работает!!!!!!!
function createLi(text) {
  let li = document.createElement('li');
  let btnGroup = document.createElement('div');
  const delBtn = document.createElement('button');
  li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
  delBtn.classList.add('btn', 'btn-danger');
  delBtn.style.cssText = 'z-index: 5;';
  btnGroup.classList.add('btn-group', 'btn-group-sm')
  delBtn.textContent = 'Удалить';
  li.textContent = text;
  btnGroup.append(delBtn);
  li.append(btnGroup);
  ul.appendChild(li);

  delBtn.addEventListener('click', function () {
    if (confirm('Вы уверены?')) {
      this.closest('li').remove();
    }
  })
}

//Слушаю поле ввода
form.addEventListener('submit', function (e) {
  e.preventDefault();
  if (!input.value) {
    return
  };
//Добавляю полученное задание в хранилище
  itemsArray.push(input.value)
  localStorage.setItem('items', JSON.stringify(itemsArray))
  createLi(input.value);
  input.value = '';
})
data.forEach(item => {
  createLi(item)
})

Answer 1

Слушаю кнопку "УДАЛИТЬ", но этого не получается

Да, просто этот элемент ещё не создан. Попробуйте поместить этот код в функцию, которая создаёт элемент

  this.remove();

вот тут вы ведь хотите удалить li, а по факту удалите кнопку. Нужно от кнопки добраться до родителя-родителя, например, через e.target.parentElement.parentElement

БЛОГ НА HUSL

JS. Как удалить элемент из LocalStorage в приложении ToDo

Ответы (1 шт):