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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #316174

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>

</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.

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 #316174 in HTML/JavaScript Web Application for siva

Comments

Leave a comment

Related Questions