如何用JavaScript在输入框为空时隐藏关联的标签、输入框和图标

问题说明 #

需要实现：当输入框的值为空时，同时隐藏该输入框、对应的标签和图标。已知CSS代码input:not([value]){display:none;}只能单独隐藏输入框，无法联动隐藏标签和图标，尝试JS实现时遇到问题。

你的代码问题分析 #

ID方式的问题 #

你写的hey()函数逻辑本身没问题，但没有触发时机（比如没绑定输入框的input或change事件），而且只处理了隐藏，没考虑输入框有值时要重新显示的情况；另外HTML里用纯数字ID虽然语法允许，但不符合规范，建议改用有意义的命名。

类名方式的错误 #

你写的document.getElementByclassname是拼写错误，正确写法是document.getElementsByClassName（注意复数Elements，且参数不要加.，因为传入的是类名本身，不是CSS选择器），而且这个方法返回的是元素集合，需要遍历才能设置样式。

正确实现方案 #

方案1：修正ID绑定逻辑（适合单个输入组） #

先调整HTML的ID命名，给输入框绑定实时监听事件：

<div>
  <label id="cardTitleLabel"><b>Card title</b></label> 
  <input type="text" id="cardTitleInput" placeholder="Enter a name for this card" value="" class="form-control label" name="title" required> 
  <i id="cardTitleIcon" class="fa-solid fa-file-signature hidel"></i>
</div>

<script>
// 获取元素
const label = document.getElementById('cardTitleLabel');
const input = document.getElementById('cardTitleInput');
const icon = document.getElementById('cardTitleIcon');

// 定义显示/隐藏逻辑的函数
function toggleInputGroup() {
  const isEmpty = input.value.trim() === '';
  // 统一设置显示状态：空值则隐藏，否则显示
  const displayStyle = isEmpty ? 'none' : 'block';
  label.style.display = displayStyle;
  input.style.display = displayStyle;
  icon.style.display = displayStyle;
}

// 页面加载时先执行一次，处理初始空值情况
toggleInputGroup();

// 绑定输入事件，实时监听值变化
input.addEventListener('input', toggleInputGroup);
// 绑定失去焦点事件，处理用户清空后离开的情况
input.addEventListener('blur', toggleInputGroup);
</script>

方案2：类名批量处理（适合多个输入组） #

把每个输入组放在一个容器里，通过容器控制显示，更易维护：

<!-- 每个输入组放在一个容器里，加类名 -->
<div class="card-input-group">
  <label class="card-input-label"><b>Card title</b></label> 
  <input type="text" class="card-input form-control label" placeholder="Enter a name for this card" value="" name="title" required> 
  <i class="card-input-icon fa-solid fa-file-signature hidel"></i>
</div>

<script>
// 获取所有输入组容器
const inputGroups = document.querySelectorAll('.card-input-group');

// 遍历每个组，绑定事件
inputGroups.forEach(group => {
  const input = group.querySelector('.card-input');
  // 定义切换函数
  function toggleGroup() {
    const isEmpty = input.value.trim() === '';
    group.style.display = isEmpty ? 'none' : 'block';
  }
  // 初始执行
  toggleGroup();
  // 绑定事件
  input.addEventListener('input', toggleGroup);
  input.addEventListener('blur', toggleGroup);
});
</script>

方案3：结合CSS+JS（更简洁） #

用JS给容器添加/移除类名，由CSS控制显示隐藏，分离逻辑与样式：

<style>
.card-input-group.hidden {
  display: none;
}
</style>

<div class="card-input-group">
  <label><b>Card title</b></label> 
  <input type="text" class="card-input" placeholder="Enter a name for this card" value="" name="title" required> 
  <i class="fa-solid fa-file-signature"></i>
</div>

<script>
const inputGroups = document.querySelectorAll('.card-input-group');
inputGroups.forEach(group => {
  const input = group.querySelector('.card-input');
  function toggleGroup() {
    const isEmpty = input.value.trim() === '';
    group.classList.toggle('hidden', isEmpty);
  }
  toggleGroup();
  input.addEventListener('input', toggleGroup);
});
</script>

内容的提问来源于stack exchange，提问作者Marcos Almeida