Remove space for a empty div

Question

I want to remove space for empty div in bootstrap. I have a container with dynamic value. some time I may have a empty div with bootstrap class.how to remove the space for empty div.I want to to remove the space for empty column (column 1)

jQuery(document).ready(function($) {
 $('.test').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-12">
       <p class="test">test</p>
    </div>
    <div class="col-md-4 col-sm-12">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-md-4 col-sm-12">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Possible duplicate of [Remove "whitespace" between div element](https://stackoverflow.com/questions/18508442/remove-whitespace-between-div-element) — Ramesh Rajendran, Mar 01 '18 at 09:55

score 0 · Answer 1 · answered Mar 01 '18 at 09:56

You can try like this

    function isEmpty( el ){
          return !$.trim(el.html())
      }
      if (isEmpty($('#element'))) {
          // do something
$('#element').addClass("hide");
      }

ref. How do I check if an HTML element is empty using jQuery?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div id="element" class="col-md-4 col-sm-12">
      
    </div>
    <div class="col-md-4 col-sm-12">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-md-4 col-sm-12">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Mar 01 '18 at 10:24

Have CSS solution if your empty div can structured like following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    div:empty { display:none !important;}
</style>
<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-12"></div> <!--Ensure no white space if no any inside DOM -->
    <div class="col-md-4 col-sm-12">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-md-4 col-sm-12">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Remove space for a empty div

2 Answers2