How do I hide an element rendered via fetch API

Question

I'm trying to resolve a coding task. I have to pull the data from the https://jsonplaceholder.typicode.com/users using fetch API function, bootstrap and jquery. I used the array.map() to print the data in a div element. Below is the vanilla version of the code - JS is running in the script tags in the HTML element.

However, the second part of the task is to hide the element on Delete button click and this is where I struggle to find a solution. I tried the callback function or button 'onclick' but that didn't work. Can someone please point me in the right direction?

Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
   <div class="container-fluid">
     <span class="navbar-brand" href="#">Test App</span>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        
         <li class="nav-item dropdown bg-light" >
           <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             Menu
           </a>
           <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
             <li><a class="dropdown-item" href="#">Menu 1</a></li>
             <li><a class="dropdown-item" href="#">Menu 2</a></li>
             <li><a class="dropdown-item" href="#">Menu 3</a></li>
           </ul>
         </li>

       </ul>
     </div>
   </div>
 </nav>

   <main>
       <div class="container" id="box">
           <h3>Showing </h3>
           <div class="row">
              <!-- Fetched data gets inserted here -->
                              
             </div>
           </div>
   </main>

   <script>
 
 
   fetch('https://jsonplaceholder.typicode.com/users').then((data) => {
       // console.log(data);
       return data.json();
   }).then((jsondata) => {
 
      
       const names = jsondata.map((values)=> {
          return `<div class="col col-lg-4 col-md-4 gx-4 gy-4">
                       <div id="card" class="card p-2">
                           <h2 id="user">${values.name}</h2>
                               <div class="card-body">
                                 <p><strong>Street:</strong> ${values.address.street}</p>
                                 <p><strong>Suite:</strong> ${values.address.suite}</p>
                                 <p><strong>City:</strong> ${values.address.city}</p>
                                 <p><strong>Zip Code:</strong> ${values.address.zipcode} 
  </p>
                                 <button "class="btn btn-primary float-end"><span><i class="fa-solid fa-trash-can"></i> </span>Delete</button>
                               </div>
                       </div>
                   </div>`
            
       })
      
    
       // document.getElementById('user').innerHTML = names;
       document.querySelector('.row').innerHTML = names;
</script>

vinesh_dodiya · Accepted Answer · 2022-07-18 06:14:13Z

You need to give id to card element.
Add click event that remove DOM element.
Also array.map returns array so If you don't want that comma you can use array.join()

Note that this will not delete items from backend/database,for that you need to make other api call.

final result :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UI Demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <span class="navbar-brand" href="#">Test App</span>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown bg-light">
              <a
                class="nav-link dropdown-toggle text-dark"
                href="#"
                id="navbarDropdown"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                Menu
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Menu 1</a></li>
                <li><a class="dropdown-item" href="#">Menu 2</a></li>
                <li><a class="dropdown-item" href="#">Menu 3</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <main>
      <div class="container" id="box">
        <h3>Showing</h3>
        <div class="row">
          <!-- Fetched data gets inserted here -->
        </div>
      </div>
    </main>

<script>
  function deleteCard(id) {
    document.getElementById(id).remove();
  }
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((data) => {
      return data.json();
    })
    .then((jsondata) => {
      console.log(jsondata);
      const names = jsondata.map((values) => {
        return `<div class="col col-lg-4 col-md-4 gx-4 gy-4" id="${values.id}">
                  <div id="card" class="card p-2">
                    <h2 id="user">${values.name}</h2>
                    <div class="card-body">
                      <p><strong>Street:</strong> ${values.address.street}</p>
                      <p><strong>Suite:</strong> ${values.address.suite}</p>
                      <p><strong>City:</strong> ${values.address.city}</p>
                      <p><strong>Zip Code:</strong> ${values.address.zipcode}</p>
                      <button onclick="deleteCard(${values.id})" "class="btn btn-primary float-end"><span><i class="fa-solid fa-trash-can"></i> </span>Delete</button>
                    </div>
                  </div>
                </div>`;
      });
      document.querySelector(".row").innerHTML = names.join("");
    });
</script>
  </body>
</html>

Collectives™ on Stack Overflow

How do I hide an element rendered via fetch API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related