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

花韻仙語

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

551人浏览过

来源于php中文网

原创

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

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

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

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

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

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

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

// 动态添加带删除按钮的字段集
const content = `
  
    Some Content 
    
  
`;
$("#box_parent").append(content);

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

容器：

$(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') 即可，逻辑完全解耦。
? 进阶提示：添加确认与动画效果

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

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

下载

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

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

轮播图怎么制作html_轮播图制作html入门方法【基础】

HTML下拉框如何设国际化_HTML下拉框加lang标语言环境【国际】

html如何转长图式pdf_html转长图pdf技巧【诀窍】

html5网站模板怎样添加页面过渡动画_html5加过渡动画窍门【指南】

html空格符号怎么打_静态页面空格符号输入注意点【提醒】

HTML速学教程(入门课程)

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

下载

相关标签:

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

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

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

作者最新文章

Python 列表为空？警惕循环中意外重置变量的常见陷阱

2026-01-17 12:29

RTX50系显卡出货大砍！今年一整年恐无新显卡

2026-01-17 12:31

解析 Python 类型注解字符串以提取泛型参数（如 Tuple 中的子类型）

2026-01-17 12:32

Go 中 map 迭代顺序的不确定性与格式化动词无关

2026-01-17 12:34

如何通过按钮点击复制并重命名文件（PHP 实现）

2026-01-17 13:05

《生化危机9：安魂曲》回归浣熊市原因曝光！让系列重回主线

2026-01-17 13:06

如何用Python优雅实现逗号分隔列表（含“and”连接）

2026-01-17 13:09

《勇者斗恶龙7 Reimagined》职业系统/强敌怪物等介绍

2026-01-17 13:15

Go语言解析SOAP响应XML的完整教程：解决命名空间导致的结构体字段为空问题

2026-01-17 13:15

《上古卷轴4：湮灭重制版》在PS5平台卖出110万份

2026-01-17 13:28

热门AI工具

DeepSeek

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

AI大模型

开放平台

豆包大模型

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

AI大模型

通义千问

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

AI大模型

腾讯元宝

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

文档处理

Excel 表格

文心一言

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

AI大模型

中文写作

讯飞写作

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

中文写作

写作工具

即梦AI

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

图片拼接

图画生成

ChatGPT

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

AI大模型

中文写作

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

AI大模型

PDF 文档

相关专题

html版权符号

html版权符号是“©”，可以在html源文件中直接输入或者从word中复制粘贴过来，php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

613

2023.06.14

html在线编辑器

html在线编辑器是用于在线编辑的工具，编辑的内容是基于HTML的文档。它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入普通HTML的地方，是Web应用的常用模块之一。php中文网为大家带来了html在线编辑器的相关教程、以及相关文章等内容，供大家免费下载使用。

651

2023.06.21

html网页制作

html网页制作是指使用超文本标记语言来设计和创建网页的过程，html是一种标记语言，它使用标记来描述文档结构和语义，并定义了网页中的各种元素和内容的呈现方式。本专题为大家提供html网页制作的相关的文章、下载、课程内容，供大家免费下载体验。

469

2023.07.31

html空格

html空格是一种用于在网页中添加间隔和对齐文本的特殊字符，被用于在网页中插入额外的空间，以改变元素之间的排列和对齐方式。本专题为大家提供html空格的相关的文章、下载、课程内容，供大家免费下载体验。

245

2023.08.01

html是什么

HTML是一种标准标记语言，用于创建和呈现网页的结构和内容，是互联网发展的基石，为网页开发提供了丰富的功能和灵活性。本专题为大家提供html相关的各种文章、以及下载和课程。

2892

2023.08.11

html字体大小怎么设置

在网页设计中，字体大小的选择是至关重要的。合理的字体大小不仅可以提升网页的可读性，还能够影响用户对网页整体布局的感知。php中文网将介绍一些常用的方法和技巧，帮助您在HTML中设置合适的字体大小。

505

2023.08.11

html转txt

html转txt的方法有使用文本编辑器、使用在线转换工具和使用Python编程。本专题为大家提供html转txt相关的文章、下载、课程内容，供大家免费下载体验。

311

2023.08.31

html文本框代码怎么写

html文本框代码：1、单行文本框【<input type="text" style="height:..;width:..;" />】；2、多行文本框【textarea style=";height:;"></textare】。

424

2023.09.01

高德地图升级方法汇总

本专题整合了高德地图升级相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.16

热门下载

网站特效

网站源码

网站素材

前端模板

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

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

⚠️ 注意事项

? 进阶提示：添加确认与动画效果