使用jQuery隐藏radio按钮与label后仍存在文档流空隙该如何解决

你当前只对单选按钮input和对应的label设置了display: none，但每一行选项末尾的<br>换行标签属于独立元素，没有被隐藏，这些换行节点仍然占据文档流的高度，所以会出现空隙，和display: none本身的特性无关。

方案1：优化DOM结构（可维护性最高） #

将每个单选选项的所有相关元素（input、label）用一个块级父容器包裹，不需要额外写<br>换行，隐藏时直接隐藏整个父容器即可：

// 改造DOM拼接逻辑，每个选项套class为radio-item的div
radioButtonsHTML = $(
  '<div class="radio-item"><input name="mainList" type="radio" id="startPacket" value="STRTPCKT" /> <label id="startPacketLabelId" for="startPacket" style="padding-left:8px;">Start Packet<span id="startPacketIncludedLabelId" style="font-weight:normal"> (Request Includes All Items)</span></label></div>' +
  '<div class="radio-item"><input name="mainList" type="radio" id="confScheduleRadio" value="CONF_SCHEDULE" /> <label id="confSheduleRadioLabelId" for="confSheduleRadio" style="padding-left:8px;">Conference Schedule</label></div>' +
  '<div class="radio-item"><input name="mainList" type="radio" id="rulesRadio" value="RULES" /> <label id="rulesRadioLabelId" for="rulesRadio" style="padding-left:8px;">Rules<span id="rulesIncludedLabelId" style="font-weight:normal"> (Request Includes All Terms and Conditions)</span></label></div>' +
  '<div class="radio-item"><input name="mainList" type="radio" id="secondStartPacket" value="..." /> <label id="secondStartPacketLabelId" for="secondStartPacket" style="padding-left:8px;">Second Start Packet<span id="secondStartPacketIncludedLabelId" style="font-weight:normal"> (Request Includes All Items)</span></label></div>' +
  '<div class="radio-item"><input name="mainList" type="radio" id="secondConfScheduleRadio" value="..." /> <label id="secondConfScheduleLabelId" for="secondConfScheduleRadio" style="padding-left:8px;">Second Conference Schedule</label></div>' +
  '<div class="radio-item"><input name="mainList" type="radio" id="secondRulesRadio" value="..." /> <label id="secondRulesRadioLabelId" for="secondRulesRadio" style="padding-left:8px;">Second Set of Rules<span id="secondRulesIncludedLabelId" style="font-weight:normal"> (Request Includes All Terms and Conditions)</span></label></div>' +
  '<br/><br/>'
);

radioButtonsHTML.appendTo("#radioButtons");

// 隐藏时直接选中父容器隐藏，整行元素都会被移出文档流
$("input[id*=startPacket]:radio").closest('.radio-item').hide();
$("input[id*=secondStartPacket]:radio").closest('.radio-item').hide();

方案2：不改动现有结构，同步隐藏对应的换行标签 #

如果不想调整现有DOM拼接逻辑，只需要在隐藏input和label的同时，把后面跟随的<br>标签一起隐藏即可：

$("input[id*=startPacket]:radio").hide().next('label').hide().next('br').hide();
$("input[id*=secondStartPacket]:radio").hide().next('label').hide().next('br').hide();

两种方案都可以完全消除空隙，方案1更符合前端开发规范，后续调整样式、增减选项的维护成本更低。

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