Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
使用 JavaScript 创建可删除列表项的按钮_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

使用 JavaScript 创建可删除列表项的按钮

程序猿 • • 用户投稿

使用 javascript 创建可删除列表项的按钮

本文介绍了如何使用 JavaScript 创建一个删除按钮，并将其与列表中的每个项目关联。通过监听按钮的点击事件，可以删除对应的列表项，并向远程 API 发送删除请求，确保数据同步。本文将提供详细的代码示例和步骤，帮助开发者轻松实现此功能。

在 Web 开发中，经常需要实现删除列表项的功能。这通常涉及到创建一个删除按钮，并将其添加到列表中的每个项目旁边。当用户点击删除按钮时，需要从 DOM 中移除对应的列表项，并且最好能够向服务器发送一个请求，以确保数据的一致性。下面将详细介绍如何使用 JavaScript 实现这一功能。

创建删除按钮

首先，我们需要创建一个函数来动态生成删除按钮。该函数接收一个 itemId 作为参数，这个 itemId 将用于向 API 发送删除请求。

function createDeleteButton(itemId) {  const deleteButton = document.createElement("button");  deleteButton.classList = "btn btn-danger"; // 添加 CSS 类，可根据实际情况调整  deleteButton.innerText = "Delete"; // 设置按钮文本  deleteButton.addEventListener("click", (e) => handleDeleteButtonClick(e, itemId)); // 绑定点击事件  return deleteButton;}

这段代码创建了一个

立即学习“Java免费学习笔记（深入）”；

处理删除按钮的点击事件

接下来，我们需要定义 handleDeleteButtonClick 函数，该函数负责从 DOM 中移除列表项，并向 API 发送删除请求。

function handleDeleteButtonClick(event, itemId) {  const row = event.target.closest("tr"); // 找到最近的  父元素  if (row) {    row.remove(); // 从 DOM 中移除列表项    // Send delete request to the remote API    fetch(`${baseUrl}/items/${itemId}`, {      method: "DELETE",    })      .then((response) => {        if (!response.ok) {          throw new Error("Error deleting item");        }        console.log("Item deleted successfully");      })      .catch((error) => {        console.error(error);      });  } else {    console.warn("Could not find parent  element.");  }}

在这个函数中，event.target 指的是触发事件的元素，也就是点击的删除按钮。closest(“tr”) 方法用于查找最近的

父元素，这通常用于表格结构的列表项。找到 元素后，使用 row.remove() 将其从 DOM 中移除。

之后，使用 fetch API 向服务器发送一个 DELETE 请求。baseUrl 变量需要根据实际情况进行设置，itemId 用于指定要删除的资源。then 和 catch 方法用于处理请求的结果，并在控制台中输出相应的消息。

注意事项

错误处理： 在实际应用中，需要更完善的错误处理机制，例如向用户显示错误消息。安全性： 确保对 itemId 进行适当的验证和转义，以防止潜在的安全漏洞。用户体验： 可以添加确认对话框，避免用户误操作。CSS 类： btn btn-danger 只是一个示例，可以根据实际情况使用不同的 CSS 类来美化按钮。baseUrl: 确保 baseUrl 变量被正确定义，指向你的API端点。

完整示例

将上述代码整合到一个完整的示例中，假设我们有一个包含列表项的 HTML 表格：

      
      Item ID      Item Name      Actions    
        
      1      Item 1          
    
      2      Item 2          
  
  const baseUrl = "https://your-api.com"; // 替换为你的API端点  function createDeleteButton(itemId) {    const deleteButton = document.createElement("button");    deleteButton.classList = "btn btn-danger";    deleteButton.innerText = "Delete";    deleteButton.addEventListener("click", (e) => handleDeleteButtonClick(e, itemId));    return deleteButton;  }  function handleDeleteButtonClick(event, itemId) {    const row = event.target.closest("tr");    if (row) {      row.remove();      fetch(`${baseUrl}/items/${itemId}`, {        method: "DELETE",      })        .then((response) => {          if (!response.ok) {            throw new Error("Error deleting item");          }          console.log("Item deleted successfully");        })        .catch((error) => {          console.error(error);        });    } else {      console.warn("Could not find parent  element.");    }  }  // 假设已经从服务器加载了数据，并将其渲染到表格中  // 这里只是一个示例，展示如何将删除按钮添加到每个列表项  const itemList = document.getElementById("item-list");  const items = [    { id: 3, name: "Item 3" },    { id: 4, name: "Item 4" },  ];  items.forEach((item) => {    const row = document.createElement("tr");    row.innerHTML = `      ${item.id}      ${item.name}          `;    const deleteButton = createDeleteButton(item.id);    row.querySelector("td:last-child").appendChild(deleteButton); // 将删除按钮添加到最后一列    itemList.appendChild(row);  });

这个示例展示了如何将删除按钮添加到动态生成的列表项中。首先，从服务器加载数据，然后遍历数据，为每个列表项创建一个

元素，并将数据填充到 元素中。最后，调用 createDeleteButton 函数创建删除按钮，并将其添加到最后一列。

总结

通过以上步骤，我们可以使用 JavaScript 创建一个可删除列表项的按钮，并将其与远程 API 集成。这种方法可以应用于各种 Web 应用程序中，提高用户体验，并确保数据的一致性。记住，在实际应用中，需要根据具体情况进行调整，并注意错误处理和安全性。

以上就是使用 JavaScript 创建可删除列表项的按钮的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533151.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
Angular Formly 自定义组件验证消息未在失焦时显示问题的解决方案
上一篇 2025年12月21日 00:20:12
JavaScript 实现列表项删除功能：简化代码与最佳实践
下一篇 2025年12月21日 00:20:19

相关推荐

  • Java字符串高级解析：使用正则表达式处理复杂指令模式

    Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式

    本教程演示如何使用Java的java.util.regex包，通过正则表达式高效解析包含多条调音指令的复杂字符串。我们将学习构建匹配特定模式的正则表达式，并利用Pattern和Matcher类从输入字符串中准确提取乐器名称、调音方向和数值，从而将原始指令转换为清晰可读的输出格式。 1. 问题背景与挑…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法

    sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法sublime如何同步多台电脑的配置和插件 _sublime多设备配置同步方法

    通过管理Sublime Text配置目录并结合云盘或Git实现多设备同步。将Packages目录移至云盘并创建符号链接，或用Git版本化关键配置文件，配合Package Control自动恢复插件，确保各设备设置一致。 Sublime Text 是许多开发者喜爱的轻量级编辑器，跨设备使用时保持配置和…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • sublime如何卸载插件 _sublime插件卸载教程

    sublime如何卸载插件 _sublime插件卸载教程sublime如何卸载插件 _sublime插件卸载教程sublime如何卸载插件 _sublime插件卸载教程sublime如何卸载插件 _sublime插件卸载教程

    通过Package Control卸载：打开Sublime Text，调出命令面板，输入Remove Package，选择插件并删除；2. 手动删除：关闭软件后进入Packages目录，删除对应插件文件夹；3. 注意清理User目录下的残留配置文件，避免冗余。操作安全，不影响主程序。 在 Subli…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • Java中整数类型溢出行为详解：二进制补码与循环特性

    Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性

    Java中原始整数类型在处理超出其范围的数值时，会遵循一种基于二进制补码的循环溢出机制。这意味着当正数溢出时会“回卷”为负数，反之亦然，如同数字在一个有限的圆环上循环。理解这一特性对于准确预测类型转换和算术运算结果至关重要。 计算机中的数值表示：位、字节与二进制 在计算机底层，所有数据都以二进制形式…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • Java数据类型溢出：原理、预测与避免

    Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免

    本文旨在深入解析Java中数据类型溢出的现象，阐述其背后的二进制补码原理，并提供预测溢出结果的方法。通过理解数据在计算机中的存储方式，以及溢出时数值的循环特性，开发者可以更好地掌握Java中的数据类型，避免潜在的错误。 数据在计算机中的存储：二进制补码 计算机底层使用二进制（bits）来表示所有数据…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • Java中数据类型溢出的原理及预测方法

    Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法

    本文旨在阐明Java中当数值超出所选数据类型范围时发生的溢出现象，并提供预测溢出结果的方法。文章将深入探讨计算机中数值的存储方式，特别是补码表示法，以及溢出时数值如何“环绕”的原理。通过理解这些概念，读者可以准确预测Java中数据类型溢出的结果。 理解计算机中的数值表示：补码 在计算机中，所有数据最…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    100

  • 使用 DynamoDBMapper 进行条件更新操作

    使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作

    本文将介绍如何利用 DynamoDBMapper 在 Java 中执行基于当前值的条件更新操作，特别是使用 “ADD” 操作来递减账户余额。虽然 DynamoDBMapper 默认不支持直接使用更新表达式，但通过配置 SaveBehavior，可以实现类似的效果。 Dynam…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • 大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤

    大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤大智慧app怎么清空缓存数据_大智慧app缓存数据清理步骤

    清理大智慧App缓存可提升运行效率，释放存储空间。首先可通过“我的”→“设置”→“缓存清理”清除临时文件；如需彻底清理，可进入“数据清除”选择“全部清除”，但会删除账户设置与交易记录；若仅需清除特定数据，可选“清除委托交易账户信息”进行精准操作。 如果您在使用大智慧App时遇到运行卡顿、加载缓慢或存…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • 解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题

    解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题

    本文旨在解决JavaFX应用在Eclipse中正常运行，但导出为可运行JAR包后，因FXMLLoader无法找到FXML资源文件而抛出IllegalStateException: Location is not set异常的问题。核心解决方案是调整FXMLLoader.setLocation()方法…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    100

  • Chrome浏览器怎么设置最小字体大小_网页最小显示字体设置教程

    Chrome浏览器怎么设置最小字体大小_网页最小显示字体设置教程Chrome浏览器怎么设置最小字体大小_网页最小显示字体设置教程Chrome浏览器怎么设置最小字体大小_网页最小显示字体设置教程Chrome浏览器怎么设置最小字体大小_网页最小显示字体设置教程

    首先调整Chrome最小字体设置至12像素以上，其次可通过页面缩放或开发者工具临时修改字体大小以提升可读性。 如果您发现Chrome浏览器中某些网页的字体过小导致阅读困难，这可能是因为浏览器或网页本身设置了较小的最小字体限制。以下是解决此问题的步骤： 本文运行环境：Dell XPS 13，Windo…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    100
  • Java多态中成员变量是否具有动态绑定特性 用户投稿

    Java多态中成员变量是否具有动态绑定特性

    成员变量不具有动态绑定特性，其访问基于引用变量的声明类型而非实际对象类型。例如，当父类和子类存在同名成员变量时，通过父类引用访问该变量将获取父类中的值，即使实际对象是子类实例。这体现了静态绑定，即在编译期确定访问的变量。相比之下，实例方法支持动态绑定（后期绑定），在运行时根据对象的实际类型决定调用哪…

    程序猿的头像 程序猿
    2026年9月25日
    100

  • Java 中处理货币数据的正确方式

    Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式

    在 Java 应用程序中，尤其是在处理财务数据时，选择正确的数据类型至关重要。货币数据通常以特定的格式呈现，例如包含货币符号（如美元符号 $）和千位分隔符（如逗号 ,）。直接将这些数据映射到 DTO 类时，我们需要仔细考虑数据类型的选择，以避免潜在的精度损失和计算错误。 货币数据类型选择考量 常见的…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • 夸克怎么关闭自动打开淘宝_夸克禁止跳转第三方App设置

    夸克怎么关闭自动打开淘宝_夸克禁止跳转第三方App设置夸克怎么关闭自动打开淘宝_夸克禁止跳转第三方App设置夸克怎么关闭自动打开淘宝_夸克禁止跳转第三方App设置夸克怎么关闭自动打开淘宝_夸克禁止跳转第三方App设置

    关闭夸克浏览器“允许打开第三方应用”权限可解决跳转问题。依次进入设置→浏览器偏好→关闭该选项；同时在系统设置中将淘宝等App的链接打开方式设为“不打开”或“询问”；搜索时长按结果选择“在浏览器中打开”；使用无痕浏览模式避免唤端行为。 如果您在使用夸克浏览器时，点击链接后自动跳转到淘宝等第三方App，…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    100

  • Java 中处理货币数据的最佳实践

    Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践

    本文旨在探讨在 Java 中处理货币数据的最佳实践。面对 JSON 数据中包含的货币值（例如 “$234,205,860″），直接使用 String 存储是一种选择，但可能并非最优。本文将深入分析各种数据类型在处理货币时的优劣，并推荐使用 BigDecimal 进行精确计算，…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • 手机照片、视频误删？这些免费恢复软件帮你找回

    手机照片、视频误删？这些免费恢复软件帮你找回手机照片、视频误删？这些免费恢复软件帮你找回手机照片、视频误删？这些免费恢复软件帮你找回手机照片、视频误删？这些免费恢复软件帮你找回

    1、可通过牛学长、EaseUS、Recuva或手机App恢复已删照片视频；2、前三种需电脑连接手机扫描，第四种直接在手机操作；3、恢复成功率取决于数据是否被覆盖。 如果您在整理手机相册时不小心删除了重要的照片或视频，不必过于惊慌。现代数据恢复技术可以在数据被新内容覆盖前，将其从设备的存储空间中找回。…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    100

  • Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制

    Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制

    本文深入探讨Java中向上转型、方法重载与可变参数（varargs）的交互机制。通过具体代码示例，详细解释了在向上转型场景下，为何编译器会基于引用变量的编译时类型来解析方法调用，即使子类存在看似更匹配的重载方法。核心在于方法重载是编译时决策，而可变参数在重载解析中具有较低的优先级。理解这些机制对于编…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法

    sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法sublime怎么实时预览markdown文件 _sublime Markdown实时预览方法

    通过安装MarkdownPreview和LiveReload插件，可在Sublime Text中实现Markdown文件的准实时预览：先用Package Control安装插件，配置导出HTML到浏览器，再结合LiveReload实现保存即刷新，最后可设置Ctrl+Alt+M为快捷键，完成高效写作体…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    400

  • Groovy编程：在HTTP请求头中传递授权令牌的实践指南

    Groovy编程：在HTTP请求头中传递授权令牌的实践指南Groovy编程：在HTTP请求头中传递授权令牌的实践指南Groovy编程：在HTTP请求头中传递授权令牌的实践指南Groovy编程：在HTTP请求头中传递授权令牌的实践指南

    本教程详细介绍了如何在Groovy中通过HTTP请求头发送授权令牌，以实现对RESTful API的安全访问。针对用户在Groovy中模拟curl -H ‘Authorization: token …’命令时遇到的常见问题，本文提供了基于java.net.URL和…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    900

  • 快速搭建一个管理App数据和用户的界面

    快速搭建一个管理App数据和用户的界面快速搭建一个管理App数据和用户的界面快速搭建一个管理App数据和用户的界面快速搭建一个管理App数据和用户的界面

    在电商、教育、企业服务等关键领域，app的数据管理效率与系统用户体验已成为决定产品市场竞争力的核心因素。本文将为开发者提供一套从需求分析到技术落地的完整路径，助你快速构建一个高效且易用的管理类app界面。 一、厘清需求：聚焦数据与用户场景的深度融合 构建管理型App的第一步是精准把握业务本质。必须深…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    700

  • Spring Boot 应用：分离 REST API 和 Web 应用的最佳实践

    Spring Boot 应用：分离 REST API 和 Web 应用的最佳实践Spring Boot 应用：分离 REST API 和 Web 应用的最佳实践Spring Boot 应用：分离 REST API 和 Web 应用的最佳实践Spring Boot 应用：分离 REST API 和 Web 应用的最佳实践

    本文旨在探讨在 Spring Boot 项目中，如何有效地分离 REST API 和 Web 应用程序。针对小型项目，建议保持简单，将代码放在同一模块的不同包中。对于大型项目，则需要考虑可伸缩性、团队协作和性能需求，将前后端分离成两个独立的 Spring Boot 应用。文章将深入分析不同场景下的架…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    300

发表回复

登录后才能评论
关注微信