删除 HTML 表单中隐藏元素占用的多余空间

Question

我有一个包含多个元素的表单。表格中有一个复选框。如果我选中该复选框，则某些表单元素会根据要求隐藏，但这些元素占用的空间不会消除。我尝试过下面的代码。

window.addEventListener('load', () => { 
      document.getElementById('cbox1').addEventListener('click', (e) => {
        const show = e.target.checked;
        document.getElementById("end1").style.visibility = show ? 'visible' : 'hidden';
        document.getElementById("tap1").style.visibility = show ? 'visible' : 'hidden';
        document.getElementById("atnd1").style.visibility = show ? 'visible' : 'hidden';
        document.getElementById("lbl1").style.visibility = show ? 'visible' : 'hidden';
        document.getElementById("lbl2").style.visibility = show ? 'visible' : 'hidden';
      });
      });

form[id=fbd1] {
  width : 250px;
  height : 320px;
  position: absolute;
  top: 71%;
  left: 16%;
  background-color: #fff;
  box-shadow: 0 0 20px;
  text-align:center;
  padding-left :10px;
  padding-top :5px;
  border-radius: 8px;
  resize:vertical;
  overflow:auto;
  }
  
  #lbl1,#end1,#tap1,#lbl2,#atnd1 {
    visibility : hidden;
  }

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<form id="fbd1" action="submitscript.php" target="dummyframe">
    <textarea id="tbd1" placeholder="Enter your details"></textarea>
    <br>
    <label>Start Time</label>&nbsp;&nbsp;<input id="strt1" type="time">&nbsp;&nbsp;&nbsp;<input id="cbox1" type="checkbox">
    <br><br>
    <label id="lbl1">End Time</label>&nbsp;&nbsp;<input id="end1" type="time">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    <br>
    <textarea id="tap1" placeholder="Enter plan details"></textarea>
    <br>
    <label id="lbl2">Named By</label>&nbsp;&nbsp;<input id="atnd1" type="text">
    <br><br>
    <input type="submit" id="btn10" value="submit">
  </form>

Answer 1

display: none;

会完成这项工作...

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  margin      : 0;
  padding     : 0;
  }
#fbd1 {
  width         : 20rem;
  height        : fit-content;
  background    : #fff;
  box-shadow    : 0 0 1.2rem;
  padding-top   : .5rem;
  border-radius : .5rem;
  margin        : 2rem;
  padding       : 1rem 0 .6rem 0;
  }
#fbd1 label , 
#fbd1 button {
  display : block;
  margin  : 1rem auto;
  width   : 80%;
  }
#fbd1 label textarea {
  width     : 100%;
  font-size : 1rem;
  }
  #fbd1 label span {
  display : inline-block;
  width   : 5rem;
  }
#fbd1 input[type="text"] {
  width   : 100%;
  }
#fbd1:has(#cbox1:not(:checked)) label.showOption {
  display: none;
  }

  <form id="fbd1" >
    <label>
      <textarea id="tbd1" placeholder="Enter your details"></textarea>      
    </label>
    <label>
      <span>Start Time</span>
      <input id="strt1" type="time">
      <input id="cbox1" type="checkbox">
    </label>
    <label class="showOption">
      <span>End Time</span>
      <input id="end1" type="time">
    </label>
    <label  class="showOption">
      <textarea id="tap1" placeholder="Enter plan details"></textarea>
    </label>
    <label class="showOption">
      Named By
      <input id="atnd1" type="text"> 
    </label>
    <button>submit</button>
  </form>