How can I delete a row in this API injected table?-CodePudding

This is a simple table I made that shows fake blog posts by their id and title. I want a way to remove any table row when I click its delete button.

Normally when you click the trash button of any table row it should delete or remove the entire table row.

I already wrote a snippet for it in JavaScript (where I traversed to the grandparent - the table row), but it doesn't seem to work.

const blog_list = document.getElementById('blog_list')

let limit = 15

async function getBlogs() {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}`)
  const responseToJSObject = await response.json()
  return responseToJSObject
}

async function showBlogs() {
  const blogs = await getBlogs()
  blogs.forEach(function(blog) {
    blog_list.innerHTML  = `
            <tr>
                <td>${blog['id']}</td>
                <td>${blog['title']}</td>
                <td>
                    <button ><i ></i></button>
                </td>
            </tr>
        `
  })
}

document.querySelectorAll('button.delete').forEach(function(btn) {
  btn.addEventListener('click', function() {
    let to_remove = this.parentElement.parentElement
    to_remove.remove();
  })
})

showBlogs()

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans', 'Yu Gothic UI';
  background-color: #1c223b;
  width: 100%;
  height: 100vh;
  display: grid;
  place-content: center;
}

div#container {
  background-color: #273349;
  box-shadow: 0 0 10px rgba(12, 16, 31, 0.4);
  padding: 10px;
}

table {
  color: #e0e0e0;
  border-collapse: collapse;
  /*border: 1px solid #000;*/
}

table th,
table td {
  border: 1px solid #e0e0e0;
  text-align: center;
  padding: 5px 10px 5px;
}

table th {
  /*text-transform: capitalize;*/
}

table tbody tr {
  background-color: #1c223b;
}

table tbody tr td button.delete {
  background-color: #242c4c;
  border: 0;
  border-radius: 2px;
  color: #909090;
  font-size: 16px;
  /*padding: 5px 10px;*/
}

table tbody tr td button.delete:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto Sans&display=swap" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
  <link rel="stylesheet" href="./style.css" />
  <title>Fetch API Using Async Await with JavaScript From Scratch</title>
</head>

<body>
  <div id="container">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="blog_list">
        <!-- populate table rows here -->
      </tbody>
    </table>
  </div>
</body>

</html>

<script src="./script.js"></script>

What did I miss?

CodePudding user response：

I don't think you have missed anything, just make sure that event can be initialized once the set of html/design is ready before the initialize any event on jQuery/javascript.

const blog_list = document.getElementById('blog_list')

let limit = 15

async function getBlogs() {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=${limit}`)
  const responseToJSObject = await response.json()
  return responseToJSObject
}

async function showBlogs() {
  const blogs = await getBlogs()
  blogs.forEach(function(blog) {
    blog_list.innerHTML  = `
            <tr>
                <td>${blog['id']}</td>
                <td>${blog['title']}</td>
                <td>
                    <button ><i ></i></button>
                </td>
            </tr>
        `;
  });
  initDeleteEvent();
}

function initDeleteEvent()
{
  document.querySelectorAll('button.delete').forEach(function(btn) {    
          btn.addEventListener('click', function(e) {
              e.currentTarget.parentElement.parentElement.remove()
          });
    });

}
showBlogs();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans', 'Yu Gothic UI';
  background-color: #1c223b;
  width: 100%;
  height: 100vh;
  display: grid;
  place-content: center;
}

div#container {
  background-color: #273349;
  box-shadow: 0 0 10px rgba(12, 16, 31, 0.4);
  padding: 10px;
}

table {
  color: #e0e0e0;
  border-collapse: collapse;
  /*border: 1px solid #000;*/
}

table th,
table td {
  border: 1px solid #e0e0e0;
  text-align: center;
  padding: 5px 10px 5px;
}

table th {
  /*text-transform: capitalize;*/
}

table tbody tr {
  background-color: #1c223b;
}

table tbody tr td button.delete {
  background-color: #242c4c;
  border: 0;
  border-radius: 2px;
  color: #909090;
  font-size: 16px;
  /*padding: 5px 10px;*/
}

table tbody tr td button.delete:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto Sans&display=swap" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
  <link rel="stylesheet" href="./style.css" />
  <title>Fetch API Using Async Await with JavaScript From Scratch</title>
</head>

<body>
  <div id="container">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="blog_list">
        <!-- populate table rows here -->
      </tbody>
    </table>
  </div>
</body>

</html>

<script src="./script.js"></script>