In December 2024
Answer to Question #316530 in HTML/JavaScript Web Application for siva
DOM.
image:
https://res.cloudinary.com/dfxicv9iv/image/upload/v1619260598/dynamic-dom-manipulations-3_bov0vg.gif
Delete btn is clicked
The blog element &the respective btn shouldbe deleted.
fill script code:
let blgList = [{
blgName:"TechCrunch",
uniqueNo:1,
},
{
blgName:"Wired",
uniqueNo:2,
}
];
let blgsListContainer = document.getElementById("blogsListContainer");
function createAndAppendItem(blg) {
let blgId = "blog" + blg.uniqueNo;
let btnId = "button" + blg.uniqueNo;
let blgEl = document.createElement("li");
blgEl.id = blgId;
blgEl.textContent = blg.blgName;
blgsListContainer.appendChild(blgEl);
let btnEl = document.createElement("button");
btnEl.classList.add("btn", "btn-danger", "ml-3");
btnEl.textContent ="Delete";
btnEl.id = buttonId;
// Write your code here
blgEl.appendChild(btnEl);
}
for (let blg of blgList) {
createAndAppendItem(blg);
}
<!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>DOM</title>
</head>
<body>
<style>
li:not(:last-child){
margin-bottom: 15px;
}
.btn-danger{
margin-left: 10px;
background: red;
color: #fff;
border: none;
border-radius: 4px;
padding: 5px 15px;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-danger:hover{
background: darkred;
}
</style>
<h1>Your Saved Blogs</h1>
<ul id="blogsListContainer"></ul>
<script>
let blgList = [{
blgName: "TechCrunch",
uniqueNo: 1,
},
{
blgName: "Wired",
uniqueNo: 2,
}
];
let blgsListContainer = document.getElementById("blogsListContainer");
function createAndAppendItem(blg) {
let blgId = "blog" + blg.uniqueNo;
let btnId = "button" + blg.uniqueNo;
let blgEl = document.createElement("li");
blgEl.id = blgId;
blgEl.textContent = blg.blgName;
blgsListContainer.appendChild(blgEl);
let btnEl = document.createElement("button");
btnEl.classList.add("btn", "btn-danger", "ml-3");
btnEl.textContent = "Delete";
btnEl.id = btnId;
// Write your code here
blgEl.appendChild(btnEl);
}
for (let blg of blgList) {
createAndAppendItem(blg);
}
function deleteBlogs(event) {
if (event.target.id.includes('button')) {
blgsListContainer.removeChild(event.target.parentNode)
}
}
blgsListContainer.addEventListener('click', deleteBlogs)
</script>
</body>
</html>
Comments
Leave a comment