But after I click delete on my first element, the innerHTML value
remains the same.
That’s because you’re not setting the innterHTML to empty text. You could set it to empty text based on the successful response of axio.
let movieToDelete = document.querySelector('.id');
let movieToDeleteID = movieToDelete.movieToDeleteID
console.log(movieToDeleteID)
await axios.post('http://localhost:5000/movies/delete', {movieToDeleteID})
.then( response => {
...
movieToDelete.innerHTML = "";
//Or, movieToDelete.parentNode.removeChild(movieToDelete);
})
.catch(err => console.error(err));
}
So I retrieve a list of data and each piece of data has an ID provided by SQL. The ID is stored in a
tag, and I extract the ID from the
tag using innerHTML.
I have an event handler that will delete the element on click based on its ID, But after I click delete on my first element, the innerHTML value remains the same. For example, say the ID of the first element was 10, once I click delete, it will delete it. But once I click delete on the element with the ID of 11, it still says the value is 10 and will NOT delete the element with the ID of 11.
I’ve tried changing the P element between ID and class. I have tried to use .textContent and getElementById() With my click handler. But they all have given the same result.
This is the code for generating the HTML from GET request.
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);
}
});
});
This is the code for deleting the movie entry.
// 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));
}
})
The HTML i’m using is
<!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>
Thank you for the help!
I figured it out thanks! For anyone else having a similar issue, I had to delete the element (in my specific case I deleted the parent element because that was my end goal was to delete it in the database and remove the elements from the page) so I did e.target.parentNode.parentNode.removeChild(e.target.parentNode) that removed the whole section element I created and solved my issue!
