如何洗掉此API注入表中的一行？-有解無憂

這是我制作的一個簡單表格，通過id和title顯示虛假博客文章。我想要一種在單擊洗掉按鈕時洗掉任何表行的方法。

通常，當您單擊任何表格行的垃圾桶按鈕時，它應該洗掉或洗掉整個表格行。

我已經在 J??avaScript 中為它寫了一個片段（我遍歷到祖父母-表格行），但它似乎不起作用。

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>

我錯過了什么？

uj5u.com熱心網友回復：

我認為您沒有遺漏任何內容，只需確保在 jQuery/javascript 上的任何事件初始化之前，一旦 html/design 集準備好就可以初始化該事件。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525676.html

標籤：javascripthtmlcss异步等待获取 API

上一篇：如何制作FAQ手風琴切換？

下一篇：將導航欄設定在右側