Why when hide a div it's space exist there

Question

I want to hide a div when clicking a button. div hides well when clicking the button. But when div hides space still exists there.

It means there are two div (It can be more than two). I want to hide the div and space also and below div replace with hiding one.

I have mentioned my tried in jsfiddle: https://jsfiddle.net/c2pnv7o6/17/

How can I fix this?

Answer 1

I would say your problem is that you use those three <br> Tags. Those are not part of the div you are hiding. By hiding the ancor changes.

 <br><br><br>

Try putting them in the div you hide, or use margin properties.

Answer 2

You are not removing the line breaks. Add them in the div element

<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>
  

Answer 3

The first div is hidden when the button is clicked. The reason the second div does not move all the way to the top is because you have three <br /> tags in the way. Remove them. Alternatively use margin-bottom on the div elements to provide the spacing, then when one is removed the white space is removed too.

In addition you should not use inline CSS or JS. Move that logic in to external stylesheet and script files. You should also look to amend the JS logic to use unobtrusive event handlers.

With all that said, try this:

 jQuery($ => { $('.test-btn').on('click', e => $(e.target).closest('.parent').hide()); });

 h6.modal-title { margin: 5px; } p { border: 1px; border-style: solid; border-color: green; padding: 0.5em; width: 15%; text-align: center; margin: 5px; display: inline-block; } .btn { float: right; } #prodcuctdiv, #prodcuctCon { margin-bottom: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal-body"> <div id="prodcuctdiv" class="parent"> <h6 class="modal-title">New Products</h6> <div> <p>sss</p> <p>jjj</p> </div> <div> <button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me1</button> </div> </div> <div id="prodcuctCon" class="parent"> <h6 class="modal-title">New Con</h6> <div> <p>mmm</p> </div> <div> <button type="button" class="test-btn btn btn-secondary btn-outline-secondary btn-sm">Click me2</button> </div> </div> </div>