@lia19
Начинающий

Как сохранить данные о том, что было удалено, и после перезагрузки страницы удалённые ранее элементы должны отсутствовать на странице?

Есть контейнер с изображениями
<div class="container">
      <div class="image">
        <img src="img/1.jpg" alt="1" /> <button>&times;</button>
      </div>
      <div class="image">
        <img src="img/2.jpg" alt="2" /><button>&times;</button>
      </div>
      <div class="image">
        <img src="img/3.jpg" alt="3" /><button>&times;</button>
      </div>
      <div class="image">
        <img src="img/4.jpg" alt="4" /><button>&times;</button>
      </div>
    </div>

При клике на × элемент удаляется
function remove() {
  let item = this.closest(".image");
  item.remove();
}
Array.from(document.querySelectorAll("button")).forEach((b) =>
  b.addEventListener("click", remove)
);

Как сохранить данные о том, что было удалено, и после перезагрузки страницы удалённые ранее элементы должны отсутствовать на странице?
  • Вопрос задан
  • 38 просмотров
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
<div class="container">
  <div class="image" id="image_1">
    <img src="img/1.jpg" alt="1" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_2">
    <img src="img/2.jpg" alt="2" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_3">
    <img src="img/3.jpg" alt="3" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_4">
    <img src="img/4.jpg" alt="4" />
    <button class="delete-button">&times;</button>
  </div>
</div>

const buttons = document.quertSelectorAll('.delete-button');

const removeBlock = (target, selector) => {
	const element = target.closest(selector);

	if (element !== null) {
		if (element.id !== '') {
			const deletedElements = JSON.parse(localStorage.getItem('deleted-elements')) || [];
			deletedElements.push(element.id);
			localStorage.setItem('deleted-elements', JSON.stringify(deletedElements));
		}

		element.remove();
	}
}

for (const button of buttons) {
	button.addEventListener('click', event => {
		event.preventDefault();
		removeBlock(event.currentTarget, '.image');
	});
}

window.addEventListener('DOMContentLoaded', () => {
	const deletedElements = JSON.parse(localStorage.getItem('deleted-elements')) || [];

	for (const deletedElement of deletedElements) {
		const element = document.quertSelector(`#${deletedElement}`);
		if (element !== null) {
			element.remove();
		}
	}
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
yarkov
@yarkov Куратор тега JavaScript
Проект "Жизнь после смерти" - lifeafterdeath.ru
  1. Хранить на бэкенде и запрашивать оттуда оставшиеся элементы
  2. Хранить в localStorage в браузере
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы