Задать вопрос
@Redwhaler
javascript

Как удалить элемент из LocalStorage?

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <form id="film-form">
      <label for="title">Название:</label><br />
      <input type="text" id="title" name="title" /><br />
      <label for="genre">Жанр:</label><br />
      <input type="text" id="genre" name="genre" /><br />
      <label for="releaseYear">Год:</label><br />
      <input type="text" id="releaseYear" name="releaseYear" /><br />
      <input type="checkbox" id="isWatched" name="isWatched" />
      <label for="isWatched">Успели посмотреть?</label><br />

      <!-- <input type="submit" value="Submit"> -->
      <button type="submit">Submit</button>
    </form>
    <table id="film-table">
      <thead>
        <tr>
          <th>Название</th>
          <th>Жанр</th>
          <th>Год</th>
          <th>Успели посмотреть?</th>
          <th>Действие</th>
        </tr>
      </thead>
      <tbody id="film-tbody">
        <!-- Rows will be inserted here -->
      </tbody>
    </table>
    <script src="script.js"></script>
  </body>
</html>


function handleFormSubmit(e) {
    e.preventDefault()

    const title = document.querySelector('#title').value;
    const genre = document.querySelector('#genre').value;
    const releaseYear = document.querySelector('#releaseYear').value;
    const isWatched = document.querySelector('#isWatched').cahecked;
    const edit = document.querySelectorAll('.edit');
    const dels = document.querySelectorAll('.delete');  

    const film = {
        title,
        genre,
        releaseYear,
        isWatched,
        edit: 'Редактировать',
        delete: 'Удалить'
    }
    addFilmToLocalStorage(film)

}

    function addFilmToLocalStorage(film) {
        const films = JSON.parse(localStorage.getItem('films')) || [];
        films.push(film);
        localStorage.setItem('films', JSON.stringify(films))

        renderTable();
    }



function renderTable() {
    const films = JSON.parse(localStorage.getItem('films')) || [];

    const filmTableBody = document.querySelector('#film-tbody');
    filmTableBody.innerHTML = "";
    
    films.forEach((film) => {
        const row = document.createElement('tr');
        row.innerHTML = `
        <td>${film.title}</td>
        <td>${film.genre}</td>
        <td>${film.releaseYear}</td>
        <td>${film.isWatched ? "Да" : "Нет"}</td>
        <td>
            <button class="edit">${film.edit}</button>
            <button class="delete">${film.delete}</button>
        </td>
        `;
        filmTableBody.appendChild(row);       
    })
     
const tableBody = document.querySelector('tbody');


tableBody.addEventListener('click', (event) => {
    event.target.closest('tr').remove();


});
}

 
     

document.querySelector('#film-form').addEventListener("submit", handleFormSubmit);

renderTable();

По нажатию на кнопку "Удалить" данный элемент в массиве "films" должен удаляться.
  • Вопрос задан
  • 325 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию + ИИ
    6 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
@7rows
Frontend Разработчик / Vue / JS / TS / CSS
Привет, смотри, есть несколько причин
1- внутри renderTable() ты каждый раз добавляешь новый обработчик события на tbody, что приводит к дублированию. Лучше добавить его один раз вне этой функции.
2- 
const isWatched = document.querySelector('#isWatched').cahecked;
-
тут у тебя кажется тоже ошибка
3- чтобы удалить нужный фильм, нужно знать, какой именно элемент массива удалять. Удобно добавить каждому фильму уникальный id - если есть, если нет, то добавь randomUUId / Date
Ну и далее, у тебя при удалении будет 
films = films.filter(film => film.id !== filmId);
        localStorage.setItem('films', JSON.stringify(films));

4- 
edit: 'Редактировать',
        delete: 'Удалить'

не имеет смысла хранить, это элементы интерфейса, но никак не данных

Примерно такой код, он не идеален, но должен работать

const form = document.querySelector('#film-form');
const tbody = document.querySelector('#film-tbody');

function getFilms() {
    return JSON.parse(localStorage.getItem('films')) || [];
}

function setFilms(films) {
    localStorage.setItem('films', JSON.stringify(films));
}

function renderTable() {
    const films = getFilms();
    tbody.innerHTML = '';
    films.forEach(film => {
        const row = document.createElement('tr');
        row.dataset.id = film.id;
        row.innerHTML = `
            <td>${film.title}</td>
            <td>${film.genre}</td>
            <td>${film.releaseYear}</td>
            <td>${film.isWatched ? "Да" : "Нет"}</td>
            <td>
                <button class="edit">Редактировать</button>
                <button class="delete">Удалить</button>
            </td>
        `;
        tbody.appendChild(row);
    });
}

function addFilmToLocalStorage(film) {
    const films = getFilms();
    film.id = Date.now();
    films.push(film);
    setFilms(films);
    renderTable();
}

function handleFormSubmit(e) {
    e.preventDefault();
    const title = document.querySelector('#title').value;
    const genre = document.querySelector('#genre').value;
    const releaseYear = document.querySelector('#releaseYear').value;
    const isWatched = document.querySelector('#isWatched').checked;
    addFilmToLocalStorage({ title, genre, releaseYear, isWatched });
    form.reset();
}

tbody.addEventListener('click', e => {
    const target = e.target;
    if (target.classList.contains('delete')) {
        const row = target.closest('tr');
        const id = Number(row.dataset.id);
        let films = getFilms();
        films = films.filter(f => f.id !== id);
        setFilms(films);
        renderTable();
    }
});

form.addEventListener('submit', handleFormSubmit);
renderTable();


Ну и лучше, в таких случаях кидать ссылку на пример
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы