html 无删除操作，真正删除 dom 节点必须用 javascript：remove() 彻底移除元素；innerhtml = '' 清空内容但保留容器；textcontent = '' 安全清空文本；del 标签仅语义标记，不删除。
HTML 本身没有“删除”操作——它只是静态标记语言，del 标签不删除内容，remove() 是 JavaScript 方法。真要删元素或内容，得靠 JS 操作 DOM。
用 remove() 彻底移除 HTML 元素
这是最直接的方式：选中元素后调用 remove()，它会从 DOM 中完全清除该节点及其所有子节点。
-
remove()不触发重排（reflow）前的事件监听器自动解绑，但已绑定的事件不会自动销毁（需手动清理或依赖 GC） - 不兼容 IE，只支持 IE10+，现代项目基本可放心用
- 不能对文档片段（
DocumentFragment）直接调用，需先 append 到真实 DOM
const btn = document.querySelector('#delete-btn');
btn.addEventListener('click', () => {
const target = document.getElementById('item-to-remove');
if (target) target.remove(); // ✅ 真删，不留痕迹
});用 innerHTML = '' 清空内容但保留容器
如果只想清空子内容、留下空标签（比如清空 <div id="list"> 里的所有 <code><li>），这是轻量选择。
- 执行快，但会销毁所有子节点及绑定的事件监听器（即使没显式 removeEventListener）
- 若容器内有通过 JS 动态插入的富文本或 canvas，
innerHTML = ''会一并清除状态 - 注意 XSS 风险：不要用它来“过滤”用户输入，应使用
textContent或白名单解析
const list = document.getElementById('list');
list.innerHTML = ''; // ❌ 不安全用于用户数据；✅ 适合可控的内部清空用 textContent = '' 安全清空文本内容
当目标只是删掉文字、不碰 HTML 结构或子元素时，textContent 更精准、更安全。
立即学习“前端免费学习笔记（深入）”；
- 只影响文本节点，保留所有子标签结构（如
<span>hello</span>会被保留，但文字变空） - 自动转义，杜绝 XSS，适合处理不可信输入
- 性能略优于
innerHTML = ''（无 HTML 解析开销）
const el = document.querySelector('.title');
el.textContent = ''; // ✅ 清空文字，不破坏子元素别误用 <del></del> 标签以为它能“删除”
<del></del> 只是语义化标记，表示内容已被删除（常用于修订稿），浏览器默认加删除线样式，但它在 DOM 中依然存在、可被 JS 访问、会参与布局和 SEO。
-
搜索引擎仍索引
<del></del>内容，不会忽略 - 屏幕阅读器会读出 “deleted: xxx”，不是静默隐藏
- 想隐藏又保留结构？用
display: none或aria-hidden="true"，但它们也不等于“删除”
<p>原价 <del>¥199</del>，现价 <ins>¥99</ins></p>
<!-- DOM 中 <del> 依然存在，JS 仍能 document.querySelector('del') 拿到 -->真正删 DOM 节点只有 JS 能做；选 remove() 还是清空内容，取决于你是否还需要那个容器。容易被忽略的是：删除后若涉及第三方库（如 Chart.js、TinyMCE），它们挂载的状态可能残留，得手动 destroy。
