Как можно удалить только одну карточку, на которую я нажал, без удаления всех остальных карточек?

Как можно удалить карточку из массива в локальном хранилище при клике на соответствующий элемент? Вот пример соответствующего кода на главной странице:
  • 3 мая 2024 г. 13:50
Ответы на вопрос 1
Для удаления только одной карточки из массива в локальном хранилище при клике на элемент, вы можете использовать следующий код:

HTML:
```html
<div class="card" data-id="1">
  <p>Карточка 1</p>
  <button class="delete-button">Удалить</button>
</div>

<div class="card" data-id="2">
  <p>Карточка 2</p>
  <button class="delete-button">Удалить</button>
</div>
```

JavaScript:
```js
// Получаем все элементы с классом "card"
const cards = document.querySelectorAll('.card');

// Перебираем каждую карточку и назначаем обработчик события на кнопку удаления
cards.forEach(card => {
  const deleteBtn = card.querySelector('.delete-button');
  deleteBtn.addEventListener('click', () => {
    // Получаем ID карточки из атрибута data-id
    const cardId = card.getAttribute('data-id');
    
    // Получаем массив карточек из локального хранилища
    let storedCards = JSON.parse(localStorage.getItem('cards')) || [];
    
    // Удаляем карточку с соответствующим ID из массива
    storedCards = storedCards.filter(card => card.id !== cardId);
    
    // Обновляем данные в локальном хранилище
    localStorage.setItem('cards', JSON.stringify(storedCards));
    
    // Удаляем карточку из DOM
    card.remove();
  });
});
```

Этот код добавляет обработчик события на каждую кнопку "Удалить" в карточке. При клике на кнопку, он получает ID карточки, фильтрует массив карточек из локального хранилища, удаляя карточку с соответствующим ID, а затем обновляет данные в локальном хранилище и удаляет карточку из DOM.
Похожие вопросы