目录

代码实现（index.js）

代码解析

使用方法

---

下面是完整的删除图书功能代码，基于 HTML + Bootstrap + JavaScript + Axios 开发。

代码实现（index.js）

javascript">// 删除图书功能
document.querySelector('.list').addEventListener('click', (e) => {
  // 判断是否点击了删除按钮
  if (e.target.classList.contains('del')) {
    // 获取要删除的图书 ID
    const theId = e.target.parentNode.dataset.id;
    console.log(`即将删除的图书ID: ${theId}`);

    // 发送 DELETE 请求删除书籍
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`,
      method: 'delete',
    }).then((result) => {
      console.log('删除成功', result);
      // 重新获取并渲染列表
      getBookList();
    }).catch((error) => {
      console.error('删除失败', error);
    });
  }
});

代码解析

1. 事件委托：监听 .list 表格区域，确保新添加的图书也能响应删除操作。
2. 获取图书 ID：通过 e.target.parentNode.dataset.id 获取要删除的书籍 ID。
3. 发送 DELETE 请求：使用 Axios 向服务器发送删除请求，成功后重新获取列表数据。
4. 自动更新列表：删除完成后，调用 getBookList() 让前端页面自动更新，无需手动刷新。

使用方法

1. 在 HTML 页面中添加一个 .list 表格区域用于显示书籍列表，并确保 getBookList() 能正确渲染数据。
2. 点击删除按钮时，触发 DELETE 请求，删除成功后自动更新界面。

该功能适合用于 图书管理系统、后台管理系统、前后端交互学习，帮助开发者理解 Axios 请求、事件委托、DOM 操作 等前端核心技术。