localStorage js функция removeBlock

Question

На странице есть скрипт удаления div блоков кликом, есть кнопки записи изменений в localStorage, всё это работает как нужно, но когда я беру данные из хранилища, то скрипт removeBlock не работает, как быть?

let block = document.querySelectorAll('#block');
block.forEach(block => block.addEventListener('click', removeBlock));
function removeBlock() {
  let block = this;
  block.style.opacity = 1;
  let blockId = setInterval(function() {
    if (block.style.opacity > 0) block.style.opacity -= .1;
    else {
    clearInterval(blockId);
    block.remove();
    }
  }, 30)
}
var parent = document.getElementById('blocks');

function save_element(){
            const parsed = parent.innerHTML;
            localStorage.setItem('hiDen', parsed);
        }

function get_element() {
    parent.innerHTML = localStorage.getItem('hiDen');
}

function clear_storage() {
   localStorage.setItem('hiDen', '');
}

window.add = save_element;
window.get_el = get_element;
window.clear_el = clear_storage;

body {
    margin: 4px 0px 2px 0px;
    padding: 0;
   }
#block {
  position: relative;
  display: inline-block;
  margin: 1px 0 0 10px;
  cursor: pointer;
}
#block img {
  width:300px;
  height: 200px;
  scale-down;
  object-position: 50% 56%;
  margin: 26px 0px 0 0px;
}
.reload, .ap, .del {
position: fixed;
right: 2px;
opacity: 0.5;
}
.reload {
  bottom: 98px;
}
.ap {
  bottom: 50px;
}
.del {
  bottom: 2px;
}

<html>
<head>
  <meta charset="utf-8">
  <title>BLOCKS</title>
</head>
<body bgcolor="#ffffff">
 <div id="blocks">
  <div id="block">
    <img src="https://mgn.com.ua/wp-content/uploads/2020/10/5c9112236b303_test_totemnoe_zhivotnoe.jpeg"></div>
    <div id="block">
    <img src="https://mgn.com.ua/wp-content/uploads/2020/10/5c9112236b303_test_totemnoe_zhivotnoe.jpeg"></div>
    <div id="block">
    <img src="https://mgn.com.ua/wp-content/uploads/2020/10/5c9112236b303_test_totemnoe_zhivotnoe.jpeg"></div>
    <div id="block">
    <img src="https://mgn.com.ua/wp-content/uploads/2020/10/5c9112236b303_test_totemnoe_zhivotnoe.jpeg"></div>
</div>
<div class="bar">
<div class="reload">
<button onclick = "get_el();window.scrollTo(0,0)"><img src="https://i.ibb.co/1ZR621g/restart.png" width="50" height="40" title="Перезагрузить и в начало"></button>
</div>
<div class="ap">
<button onclick = "add()"><img src="https://i.ibb.co/fQYGw79/ap.png" width="50" height="40" title="Сохранить изменения"></button>
</div>
<div class="del">
<button onclick = "clear_el()"><img src="https://i.ibb.co/g4QzX9Z/del.png" width="50" height="40" title="Удалить изменения"></button>
</div>
</div>
</body>
</html>

Answer 1

Проблема тут:

let block = document.querySelectorAll('#block');

и тут:

id="block"

Потому что на странице уникальный идентификатор должен быть только один. Поэтому селектор ищет первый попавшийся и работает с ним. Чтобы избежать проблемы, надо использовать не id а классы class

Также, возможно, обработчики вешаются до того, как добавляются элементы из хранилища. Поэтому надо вешать события либо после добавления их в DOM, либо использовать делегирование событий (вкратце - нужно навешивать событие на ближайшего предка, который всегда на странице и никогда не изменяется)

Answer 2

Делегирование событий помогло

let blocks = document.getElementById('base');

    let selectedDiv;

    blocks.onclick = function(event) {
      let target = event.target;

      while (target != this) {
        if (target.tagName == 'DIV') {
          removeBlock(target);
          return;
        }
        target = target.parentNode;
      }
    }

    function removeBlock(node) {
      if (selectedDiv) {
      }
      selectedDiv = node;
      selectedDiv.remove();

Никак не могу приляпать плавное исчезновение блока перед удалением как в предыдущем варианте

БЛОГ НА HUSL

localStorage js функция removeBlock

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