Привет, смотри, есть несколько причин
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();
Ну и лучше, в таких случаях кидать ссылку на пример
