本文介绍一种结构清晰、可维护性强的 JavaScript 方案：通过将语义相关的表单元素（如 label、input、icon）包裹在同一个父容器中，利用 parentNode 定位并统一控制显隐，避免逐个 ID 操作带来的耦合与扩展难题。
本文介绍一种结构清晰、可维护性强的 javascript 方案：通过将语义相关的表单元素（如 label、input、icon）包裹在同一个父容器中，利用 `parentnode` 定位并统一控制显隐，避免逐个 id 操作带来的耦合与扩展难题。
在实际表单开发中，常需根据输入值动态隐藏整组关联元素（例如：标题标签、输入框、右侧功能图标）。若采用为每个元素单独设置 display: none 的方式（如原代码中反复调用 document.getElementById(...).style.display = "none"），不仅代码冗余、难以维护，还会因硬编码 ID 导致组件复用性差，且无法响应后续动态添加的同类表单项。
推荐做法：基于语义分组 + CSS 类控制
核心思路是——将逻辑上属于同一字段的多个 DOM 元素（label、input、icon）封装在一个共同父容器内（如 ✅ 正确实现示例： 立即学习“Java免费学习笔记（深入）”； ? 进阶优化建议： 总结来说，良好的 DOM 结构设计是前端逻辑简洁化的基础。将语义相关的元素合理分组，并借助现代 DOM API（如 parentNode、classList）进行批量操作，不仅能高效解决问题，也为后续组件化、框架迁移打下坚实基础。<!-- 结构化分组：所有同属一个字段的元素被包裹 -->
<div class="form-group">
<label for="title-input"><b>Card title</b></label>
<input
type="text"
id="title-input"
placeholder="Enter a name for this card"
value=""
class="form-control"
name="title"
required
>
<i class="fa-solid fa-file-signature field-icon"></i>
</div>
<button class="btn-check-empty">检查并隐藏空字段</button>/* 统一隐藏样式，作用于整个分组 */
.form-group.hide {
display: none;
}// 使用事件委托或按钮触发检查逻辑
document.querySelector('.btn-check-empty').addEventListener('click', function () {
const input = document.getElementById('title-input');
// 关键：获取 input 的直接父容器（即 .form-group），并根据值决定是否添加 hide 类
if (input && input.value.trim() === '') {
input.parentNode.classList.add('hide');
} else {
input.parentNode.classList.remove('hide');
}
});
