Javascript 为什么隐藏一个div时它的空间会存在

我想在单击按钮时隐藏一个div。单击按钮时，div隐藏良好。但当div隐藏时，空间仍然存在

这意味着有两个div，它可以超过两个。我想隐藏div和空格，并在div下面替换为隐藏一个

我提到了我在JSFIDLE中尝试过的：

---

如何修复此问题？

您没有删除换行符。将它们添加到div元素中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="modal-body">
  <div id="prodcuctdiv">
    <h6 style="margin: 5px;" class="modal-title">New Products</h6>
    <div>
      <p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">sss</p>
      <p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">jjj</p>
    </div>
    <div>
      <button onclick="myFunction1()" style="float:right;" id="addBtn" type="button" class="btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
    </div>
    <br><br><br> 
  </div>
  

---

您没有删除换行符。将它们添加到div元素中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="modal-body">
  <div id="prodcuctdiv">
    <h6 style="margin: 5px;" class="modal-title">New Products</h6>
    <div>
      <p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">sss</p>
      <p style="border:1px; border-style:solid; border-color:green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; float:left;">jjj</p>
    </div>
    <div>
      <button onclick="myFunction1()" style="float:right;" id="addBtn" type="button" class="btn btn-secondary btn-outline-secondary btn-sm">Click me1</button>
    </div>
    <br><br><br> 
  </div>
  

---

我想说你的问题是你使用了这三个标签。那些不是你藏匿的分区的一部分。通过隐藏ancor变化

 <br><br><br>

---

试着把它们放在你隐藏的div中，或者使用margin属性。

我想你的问题是你使用了这三个标签。那些不是你藏匿的分区的一部分。通过隐藏ancor变化

 <br><br><br>

---

尝试将它们放在隐藏的div中，或使用边距属性。

单击按钮时，第一个div被隐藏。第二个div没有一直移动到顶部的原因是因为有三个标记。移除它们。或者，在div元素上使用margin bottom来提供间距，当删除一个元素时，也会删除空白

此外，您不应该使用内联CSS或JS。将该逻辑移到外部样式表和脚本文件中。您还应该修改JS逻辑，以使用不引人注目的事件处理程序

说了这么多，试试这个：

jQuery$=>{ $'.test btn'。单击时，e=>$e.target.closest'.parent'。隐藏； }; h6.1-title{ 保证金：5px； } p{ 边界：1px； 边框样式：实心； 边框颜色：绿色； 填充：0.5em； 宽度：15%； 文本对齐：居中； 保证金：5px； 显示：内联块； } .btn{ 浮动：对； } prodcuctdiv， ProdCuccon{ 边缘底部：10px； } 新产品 sss

jjj

单击me1 新骗局 嗯

单击me2

---

单击按钮时，第一个div被隐藏。第二个div没有一直移动到顶部的原因是因为有三个标记。移除它们。或者，在div元素上使用margin bottom来提供间距，当删除一个元素时，也会删除空白

此外，您不应该使用内联CSS或JS。将该逻辑移到外部样式表和脚本文件中。您还应该修改JS逻辑，以使用不引人注目的事件处理程序

说了这么多，试试这个：

jQuery$=>{ $'.test btn'。单击时，e=>$e.target.closest'.parent'。隐藏； }; h6.1-title{ 保证金：5px； } p{ 边界：1px； 边框样式：实心； 边框颜色：绿色； 填充：0.5em； 宽度：15%； 文本对齐：居中； 保证金：5px； 显示：内联块； } .btn{ 浮动：对； } prodcuctdiv， ProdCuccon{ 边缘底部：10px； } 新产品 sss

jjj

单击me1 新骗局 嗯

单击me2

---

空间似乎来自这些元素。空间似乎来自这些元素。^这是。另外，尽量不要使用标签，也不要使用浮点数，尝试使用flexbox或grid^之类的工具。另外，尽量不要使用标签，也不要使用浮点数，尝试使用flexbox或grid之类的工具