隐藏表单标签时，如何消除<br>标签占用的空白空间？

嘿，你猜的完全没错！那些<br>标签就是罪魁祸首——你只隐藏了输入框和对应的标签，但换行标签还老老实实地留在页面上，自然会占着空白位置，导致下面的元素没法补上来。给你几个实用的解决方案，挑适合你的来：

方案1：用容器包裹每组输入（最推荐） #

把每组「标签+输入框+换行」都放进一个容器（比如<div>）里，这样你只需要控制这个容器的显示隐藏，就能把整组元素包括换行一起藏起来，结构也更清晰。

修改后的HTML：

<div id="idGroup">
  <label for="id" id="idLabel">ID:</label><br>
  <input type="text" name="id" id="id" placeholder="ID da ricercare" /><br>
</div>
<div id="nomeGroup">
  <label for="nome" id="nomeLabel">Nome:</label><br>
  <input type="text" name="nome" id="nome" placeholder="Nome da ricercare" /><br>
</div>
<div id="provinciaGroup">
  <label for="provincia" id="provinciaLabel">Provincia:</label><br>
  <input type="text" name="provincia" id="provincia" placeholder="Provincia da ricercare" /><br>
</div>

对应的JS函数：

function showInsert() {
  document.getElementById("idGroup").style.display = "none";
  document.getElementById("nomeGroup").style.display = "block";
  document.getElementById("provinciaGroup").style.display = "block";
}

注：这里用block代替initial更稳妥，因为initial会恢复元素的默认显示值，而div默认就是block，避免意外问题。

方案2：给<br>标签加ID，一起控制显示隐藏 #

如果不想大改HTML结构，那就给每个需要隐藏的<br>也加上ID，在JS里同步控制它们的显示状态。

修改后的HTML（只改相关部分）：

<label for="id" id="idLabel">ID:</label><br id="idBr1">
<input type="text" name="id" id="id" placeholder="ID da ricercare" /><br id="idBr2">

对应的JS函数：

function showInsert() {
  document.getElementById("id").style.display = "none";
  document.getElementById("nome").style.display = "block";
  document.getElementById("provincia").style.display = "block";
  document.getElementById("idLabel").style.display = "none";
  document.getElementById("nomeLabel").style.display = "block";
  document.getElementById("provinciaLabel").style.display = "block";
  // 控制对应的br标签
  document.getElementById("idBr1").style.display = "none";
  document.getElementById("idBr2").style.display = "none";
}

这个方案适合小范围调整，但如果元素多了，代码会变繁琐。

方案3：用CSS类统一控制（更简洁易维护） #

定义一个CSS类，专门处理隐藏状态，然后通过JS给元素添加/移除这个类，比直接操作style更清晰，也方便复用。

首先加CSS：

.hidden {
  display: none !important;
}

修改后的HTML（给初始需要隐藏的元素加类）：

<label for="nome" id="nomeLabel" class="hidden">Nome:</label><br>
<input type="text" name="nome" id="nome" class="hidden" placeholder="Nome da ricercare" /><br>
<label for="provincia" id="provinciaLabel" class="hidden">Provincia:</label><br>
<input type="text" name="provincia" id="provincia" class="hidden" placeholder="Provincia da ricercare" /><br>

对应的JS函数：

function showInsert() {
  // 隐藏ID相关元素
  document.getElementById("id").classList.add("hidden");
  document.getElementById("idLabel").classList.add("hidden");
  // 别忘了对应的br标签！如果用方案1的容器就不用管这个了
  document.getElementById("idBr1").classList.add("hidden");
  document.getElementById("idBr2").classList.add("hidden");
  
  // 显示其他元素
  document.getElementById("nome").classList.remove("hidden");
  document.getElementById("nomeLabel").classList.remove("hidden");
  document.getElementById("provincia").classList.remove("hidden");
  document.getElementById("provinciaLabel").classList.remove("hidden");
}

这个方案扩展性强，后续要加更多元素控制的话，只需要给元素加/移除类就行，代码更干净。

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