如何删除动态添加的 HTML 代码块

花韻仙語

发布时间：2026-01-17 20:12:08

811人浏览过

来源于php中文网

原创

如何删除动态添加的 HTML 代码块

本文详解如何为动态生成的 html 元素（如 `

`）绑定删除功能，确保点击其内部“删除”按钮时，仅移除该元素自身而非全部内容，并强调避免重复 id、正确使用事件委托与 dom 遍历方法。

在前端开发中，动态添加 HTML 块（例如通过 append() 插入

）后，若需为每个块内的“删除”按钮实现独立删除逻辑，关键在于：不能依赖 ID 选择器定位目标元素（因为 ID 在页面中必须唯一，重复 ID 会导致 $('#delete_row_box') 始终只匹配第一个），而应利用事件委托 + 相对 DOM 关系定位。

✅ 正确做法：使用类名 + 事件委托 + 精准父级定位

首先，将按钮的 id="delete_row_box" 改为 class="delete-row-btn"（推荐语义化命名），并确保每次插入的 HTML 结构一致：

<div id="box_parent"></div>

// 动态添加带删除按钮的字段集
const content = `
  <fieldset>
    Some Content 
    <input type="button" class="delete-row-btn" value="Delete">
  </fieldset>
`;
$("#box_parent").append(content);

然后，使用事件委托绑定点击事件，并通过 $(this) 指向被点击的按钮，再向上查找其所属的

泪无痕工作室网站后台管理系统

新闻，案例，下载及前台页全部生成HTML，属于全自动化、全智能的在线方式管理、维护、更新的网站管理系统功能说明：1.系统管理:管理员管理，可以新增管理员及修改管理员密码；添加管理员。并可以分配权限;生成前台页的HTML2.新闻管理:可以添加、删除、修改新闻，并批量生成所有记录的静态页面;3.案例管理:可以添加、删除、修改案例，并批量生成所有记录的静态页面;4.下载管理:可以添加、删除、修改下载程序

下载

容器：

$(document).on('click', '.delete-row-btn', function() {
  $(this).closest('fieldset').remove();
});

? closest('fieldset') 会从当前按钮开始向上遍历 DOM，找到最近的匹配祖先（即使按钮嵌套在或内也可靠）。这是比 parent() 更健壮的选择——后者仅限直接父元素，一旦结构变化（如后期加了包装层）就会失效。

⚠️ 注意事项

禁止重复 ID：HTML 规范要求 id 全局唯一。若多次调用 append() 含 id="delete_row_box" 的代码，将导致 JS 行为不可预测（$('#delete_row_box') 只返回首个匹配项），务必改用 class。
事件委托是必须的：动态添加的元素在页面加载时并不存在，因此不能用 $('.delete-row-btn').on('click', ...) 直接绑定；必须借助 $(document).on('click', selector, handler) 或更优的 $('#box_parent').on('click', '.delete-row-btn', ...)（提升性能，减少事件冒泡范围）。
可扩展性建议：若未来容器类型变化（如改用
），只需将 closest('fieldset') 中的选择器更新为 .closest('.row') 即可，逻辑完全解耦。
? 进阶提示：添加确认与动画效果

增强用户体验，可加入删除前确认及淡出动画：

立即学习“前端免费学习笔记（深入）”；
```
$(document).on('click', '.delete-row-btn', function() {
  if (!confirm('确定要删除此项？')) return;

  const $fieldset = $(this).closest('fieldset');
  $fieldset.fadeOut(300, function() {
    $(this).remove();
  });
});
```
这样，既保证了功能精准性，又兼顾了交互友好性与代码可维护性。

HTML中如何添加边框_HTML添加边框样式属性【边框设置】

怎样设置HTML的msapplication元信息_Windows磁贴图标的配置【操作】

html超链接字体颜色怎么改_a标签链接文字颜色修改【样式】

html导航栏怎么弄_html响应式导航条制作【方法】

html动画怎么生成视频_html动画转视频工具与录制方法【实操】

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

html js 前端 app 事件冒泡前端开发点击事件 class 委托 append delete JS 事件 dom this 选择器

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：html怎样本地转pdf_本地html转pdf操作技巧【指南】下一篇：HTML下拉框如何删选项_JS删HTML下拉框指定option【删除】

作者最新文章

Go 中赋值操作为何必须使用等号：理解通道操作与表达式设计的底层逻辑

2026-03-03 15:59

高效统计用户指定时间窗口内的登录次数：数据结构选型与时间复杂度分析

2026-03-03 16:29

jQuery移动端下拉菜单自动关闭其他子菜单的实现方法

2026-03-03 16:30

如何在 Python 中正确结合抽象工厂模式与委托模式避免递归错误

2026-03-03 16:37

《星之卡比：飞天骑士》开发秘闻作曲家创作时根本不知什么游戏

2026-03-03 16:47

Node.js 中正确使用 mkdir 创建目录及文件的完整教程

2026-03-03 16:55

Spring Data JPA 多表关联投影：避免笛卡尔积与重复数据的正确实践

2026-03-03 16:58

如何在线性时间复杂度内高效定位有序数组中唯一的缺失整数（支持重复元素）

2026-03-03 16:59

Python curses Textbox 保留空行的正确配置方法

2026-03-03 17:44

网易大神如何屏蔽好友

2026-03-03 17:56

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发 AI聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发 AI文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发 AI文本写作

智谱清言 - 免费全能的AI助手

AI编程开发 Agent智能体

相关专题

class在c语言中的意思

在C语言中，"class" 是一个关键字，用于定义一个类。想了解更多class的相关内容，可以阅读本专题下面的文章。

788

2024.01.03

python中class的含义

本专题整合了python中class的相关内容，阅读专题下面的文章了解更多详细内容。

2025.12.06

append用法

append是一个常用的命令行工具，用于将一个文件的内容追加到另一个文件的末尾。想了解更多append用法相关内容，可以阅读本专题下面的文章。

348

2023.10.25

python中append的用法

在Python中，append()是列表对象的一个方法，用于向列表末尾添加一个元素。想了解更多append的更多内容，可以阅读本专题下面的文章。

1080

2023.11.14

python中append的含义

本专题整合了python中append的相关内容，阅读专题下面的文章了解更多详细内容。

183

2025.09.12

数据库Delete用法

数据库Delete用法：1、删除单条记录；2、删除多条记录；3、删除所有记录；4、删除特定条件的记录。更多关于数据库Delete的内容，大家可以访问下面的文章。

287

2023.11.13

drop和delete的区别

drop和delete的区别：1、功能与用途；2、操作对象；3、可逆性；4、空间释放；5、执行速度与效率；6、与其他命令的交互；7、影响的持久性；8、语法和执行；9、触发器与约束；10、事务处理。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

222

2023.12.29

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

530

2023.06.20

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

2026.03.05

热门下载

网站特效

网站源码

网站素材

前端模板