Для удаления только одной карточки из массива в локальном хранилище при клике на элемент, вы можете использовать следующий код:
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.