Answer to Question #302712 in HTML/JavaScript Web Application for chethan

Question

Answer to Question #302712 in HTML/JavaScript Web Application for chethan

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #302712

DOM Manipulations - 3

Use the below reference image.

https://res.cloudinary.com/dfxicv9iv/image/upload/v1619260598/dynamic-dom-manipulations-3_bov0vg.gif

JAVASCRIPT

let blogList = [

{

blogName: "TechCrunch",

uniqueNo: 1,

},

{

blogName: "Wired",

uniqueNo: 2,

},

{

blogName: "Mashable",

uniqueNo: 3,

}

];

let blogsListContainerEl = document.getElementById("blogsListContainer");

function createAndAppendItem(blog) {

let blogId = "blog" + blog.uniqueNo;

let buttonId = "button" + blog.uniqueNo;

let blogEl = document.createElement("li");

blogEl.id = blogId;

blogEl.textContent = blog.blogName;

blogsListContainerEl.appendChild(blogEl);

let buttonEl = document.createElement("button");

buttonEl.classList.add("btn", "btn-danger", "ml-3");

buttonEl.textContent = "Delete";

buttonEl.id = buttonId;

// Write your code here

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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title></title>
</head>
<body>
    <ul id="blogsListContainer"></ul>
    <script>
        let blogList = [
        {
            blogName: "TechCrunch",
            uniqueNo: 1,
        },
        {
            blogName: "Wired",
            uniqueNo: 2,
        },
        {
            blogName: "Mashable",
            uniqueNo: 3,
        }
        ];
        let blogsListContainerEl = document.getElementById("blogsListContainer");
        function createAndAppendItem(blog) {
            let blogId = "blog" + blog.uniqueNo;
            let buttonId = "button" + blog.uniqueNo;
            let blogEl = document.createElement("li");
            blogEl.id = blogId;
            blogEl.textContent = blog.blogName;
            blogsListContainerEl.appendChild(blogEl);
            let buttonEl = document.createElement("button");
            buttonEl.classList.add("btn", "btn-danger", "ml-3");
            buttonEl.textContent = "Delete";
            buttonEl.id = buttonId;
            blogEl.append(buttonEl)
        }
        blogList.map(e => createAndAppendItem(e))
        blogsListContainerEl.addEventListener('click', (e) => {
            if (e.target.classList.contains('btn')) {
                blogsListContainerEl.removeChild(e.target.parentElement)
            }
        })
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #302712 in HTML/JavaScript Web Application for chethan

Comments

Leave a comment

Related Questions