Question

Question #303828

DOM Manipulations

Use the below reference image link:.

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.

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>Document</title>
  <style>
    button {
      height: 30px;
      width: 80px;
      background-color: red;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <h1>Your Saved Blogs</h1>


  <ul>
    <li>TechCrunch&nbsp&nbsp<button>Delete</button></li>
    <li>Wired&nbsp&nbsp<button>Delete</button></li>
    <li>Mashable&nbsp&nbsp<button>Delete</button></li>
  </ul>


  <script>
    var ul = document.getElementsByTagName("ul")[0];
    var lis = ul.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i++) {
      lis[i].firstElementChild.addEventListener("click", function(event) {
        console.log(ul);
        ul.removeChild(event.target.parentElement);
      });
    }
  </script>
</body>
</html>

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

Comments

No comments. Be the first!