隐藏相邻<div>后如何同步隐藏对应的<br>标签？

问题根源在于<br>是独立的DOM元素，和对应的<div>没有关联，所以隐藏div时br会留在页面上，产生多余空行。以下是三种可行的解决办法：

方法1：用容器包裹div和对应br #

把每个div和它后面的br放进同一个容器中，这样隐藏容器时，内部的div和br会一起被隐藏。

修改后的HTML：

<div id="container1">
  <div id="myDiv1">div 1</div>
  <br>
</div>
<div id="container2">
  <div id="myDiv2">div 2</div>
  <br>
</div>
<div id="container3">
  <div id="myDiv3">div 3</div>
</div>
<button onclick="hide1()">Toggle div 1</button>

对应的JS：

function hide1() {
  var container = document.getElementById("container1");
  if (container.style.display === "none") {
    container.style.display = "block";
  } else {
    container.style.display = "none";
  }
}

方法2：给br添加ID，同步控制显示状态 #

给每个br设置对应的ID，在toggle函数中同时处理div和br的显示/隐藏。

修改后的HTML：

<div id="myDiv1">div 1</div> <br id="br1">
<div id="myDiv2">div 2</div> <br id="br2">
<div id="myDiv3">div 3</div>
<button onclick="hide1()">Toggle div 1</button>

对应的JS：

function hide1() {
  var div = document.getElementById("myDiv1");
  var br = document.getElementById("br1");
  var isHidden = div.style.display === "none";
  
  div.style.display = isHidden ? "block" : "none";
  br.style.display = isHidden ? "block" : "none";
}

方法3：用CSS间距替代br（推荐方案） #

<br>的语义是换行，并非用于控制元素间距。改用CSS的margin属性给div设置底部间距，隐藏div后间距会自动消失，无需处理额外元素。

修改后的HTML：

<div id="myDiv1" class="content-item">div 1</div>
<div id="myDiv2" class="content-item">div 2</div>
<div id="myDiv3" class="content-item">div 3</div>
<button onclick="hide1()">Toggle div 1</button>

添加CSS：

.content-item {
  margin-bottom: 16px; /* 可根据需求调整间距大小 */
}
/* 移除最后一个元素的底部间距，避免多余空白 */
.content-item:last-child {
  margin-bottom: 0;
}

原有的JS函数无需修改，直接使用即可：

function hide1() {
  var x = document.getElementById("myDiv1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

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