目录

代码实现（index.js）

代码解析

使用方法

---

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

代码实现（index.js）

javascript">// 删除图书功能
document.querySelector('.list').addEventListener('click', (e) => {// 判断是否点击了删除按钮if (e.target.classList.contains('del')) {// 获取要删除的图书 IDconst 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 操作 等前端核心技术。