Итак, я извлекаю список данных, и каждая часть данных имеет идентификатор, предоставленный SQL. Идентификатор хранится в теге
, и я извлекаю идентификатор из тега
, используя внутренний HTML.
У меня есть обработчик событий, который удаляет элемент при щелчке по его идентификатору. , Но после того, как я нажму кнопку «Удалить» на моем первом элементе, внутреннее значение HTML останется прежним. Например, предположим, что идентификатор первого элемента был 10, как только я нажимаю кнопку «Удалить», он удаляет его. Но как только я нажимаю удалить элемент с идентификатором 11, он по-прежнему говорит, что значение равно 10, и НЕ удаляет элемент с идентификатором 11.
Я попытался изменить элемент P между идентификатором и класс. Я пробовал использовать .textContent и getElementById () с моим обработчиком кликов. Но все они дали одинаковый результат.
Это код для генерации HTML из запроса GET.
getMoviesBtn.addEventListener('click', async(e) => {
e.preventDefault();
await axios.get('http://localhost:5000/movies/retrieve-movies')
.then( res => {
console.log(res.data)
const movieList = res.data
for (let i = 0; i<movieList.length; i++) {
const sections = document.createElement('section')
sections.innerHTML = `
<p class='id'> ${movieList[i].id} </p>
<p> Title: ${movieList[i].title} </p>
<p> Runtime: ${movieList[i].runtime} </p>
<p> Release date: ${movieList[i].releaseDate} </p>
<button class="delete-btn">Delete</button>
`
divMovieList.appendChild(sections);
}
});
});
Это код для удаления записи mov ie .
// Delete movie
document.addEventListener('click', async(e) => {
e.preventDefault();
if(e.target && e.target.textContent === 'Delete') {
// Reset the notification bar to be displayed again
resetNotification();
let movieToDeleteID = document.querySelector('.id').innerHTML;
console.log(movieToDeleteID)
await axios.post('http://localhost:5000/movies/delete', {movieToDeleteID})
.then( response => {
showNotification(response);
})
.catch(err => console.error(err));
}
})
Я использую HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="notification">
<a id="close"> Close </a>
</div>
<nav>
<a href="./index.html">Create Movie</a>
</nav>
<div id="get-movies-btn-div">
<button id='get-movies-btn'>Get all movies</button>
</div>
<div id='movie-list'></div>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="movieList.js"></script>
</body>
</html>
Спасибо за помощь!