In December 2024
Answer to Question #316174 in HTML/JavaScript Web Application for siva
DOM Manipulations - 3
The goal of this coding exam is to quickly get you off the ground with the DOM Manipulations.
Use the below reference image.
https://res.cloudinary.com/dfxicv9iv/image/upload/v1619260598/dynamic-dom-manipulations-3_bov0vg.gif
When the Delete button is clicked
- The blog element and the respective button should be deleted.
Html:
<div>
<h1>Your Saved Blogs</h1>
<ul id="blogsListContainer"></ul>
</div>
Note
Use the removeChild method to remove the element from DOM.
It should pass:
JS code implementation should use the removeChild method to remove the child.
When the HTML button element with the id button1 is clicked,the HTML list item element with the id blog1 should remove from the HTML unordered list element with the id blogsListContainer.
When the HTML button element with the id button1 is clicked,the HTML list item element with the id blog2 should remove from the HTML unordered list element with the id blogsListContainer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blogs</title>
</head>
<body>
<style>
li:not(:last-child){
margin-bottom: 15px;
}
.delete{
margin-left: 10px;
background: red;
color: #fff;
border: none;
border-radius: 4px;
padding: 5px 15px;
transition: all 0.3s ease;
cursor: pointer;
}
.delete:hover{
background: darkred;
}
</style>
<div>
<h1>Your Saved Blogs</h1>
<ul id="blogsListContainer">
<li>Blog 1 <button class="delete">Delete</button></li>
<li>Blog 2 <button class="delete">Delete</button></li>
<li>Blog 3 <button class="delete">Delete</button></li>
<li>Blog 4 <button class="delete">Delete</button></li>
<li>Blog 5 <button class="delete">Delete</button></li>
</ul>
</div>
<script>
const blogs = document.getElementById('blogsListContainer');
function deleteBlogs(event) {
if (event.target.classList.contains('delete')) {
blogs.removeChild(event.target.parentNode)
}
}
blogs.addEventListener('click', deleteBlogs)
</script>
</body>
</html>
Comments
Leave a comment