Answer to Question #315348 in HTML/JavaScript Web Application for siva

Question #315348

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.

Note

Use the removeChild method to remove the element from DOM.

Html code:

<body>

<div>

<h1>Your Saved Blogs</h1>

</div>

</body>

Expert's answer

<!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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #315348 in HTML/JavaScript Web Application for siva

Comments

Leave a comment

Related Questions