CODEWITHSUNDEEP
jqueryhtmlcss
hardcode
hardcode

Reputation: 405

Increase or decrease parent div height based on the changes in the children element

https://jsfiddle.net/9b90twgf/15/

 $("#add").on("click",function(){
var top = parseInt($("#parentDiv .childDiv:last").css("top").split("px")[0])+90;

$("#parentDiv").append("<div class='childDiv' style='position:absolute; top:"+top+"px;'>divvvvvv</div>");
});

 $("#remove").on("click",function(){
$("#parentDiv .childDiv:last").remove();
});
  #parentDiv
	    {
	     background: antiquewhite;
	     }
	    .childDiv
	    {
	    background: yellow;
      width: 700px; 
      height: 50px;
	     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="add">add</button><button id="remove">remove</button>
  <div style="position: absolute; width: 700px; height: 210px;" id="parentDiv">
      <div class="childDiv" style="position: absolute;">
    Div one
    </div>

    <div class="childDiv" style="position: absolute; top: 75px;">
    div two
   </div>
   <div class="childDiv" style="position: absolute; top: 140px;">
   div three
  </div>
  </div>

I have one parent div, under this I will append and remove HTML elements as children, if I remove children element parent div have to shrink its height automatically and if I add it have to expand automatically, my requirement is both parent and children must have position absolute(style="position:absolute")

Upvotes: 0

Views: 1007

Answers (2)

Supraja Ganji
Supraja Ganji

Reputation: 1207

Change height of parent div on add and remove of children

 $("#add").on("click",function(){
var top = parseInt($("#parentDiv .childDiv:last").css("top").split("px")[0])+90;

$("#parentDiv").append("<div class='childDiv' style='position:absolute; top:"+top+"px;'>divvvvvv</div>");
$("#parentDiv").css('height', top + 90);
});

 $("#remove").on("click",function(){
$("#parentDiv").css('height',$("#parentDiv .childDiv:last-child").css('top'));
$("#parentDiv .childDiv:last").remove();
});
  #parentDiv
	    {
	     background: antiquewhite;
	     }
	    .childDiv
	    {
	    background: yellow;
      width: 700px; 
      height: 50px;
	     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="add">add</button><button id="remove">remove</button>
  <div style="position: absolute; width: 700px; height: 210px;" id="parentDiv">
      <div class="childDiv" style="position: absolute;">
    Div one
    </div>

    <div class="childDiv" style="position: absolute; top: 75px;">
    div two
   </div>
   <div class="childDiv" style="position: absolute; top: 140px;">
   div three
  </div>
  </div>

Upvotes: 1

Nick De Jaeger
Nick De Jaeger

Reputation: 1249

$("#add").on("click", function() {
  addChild();
  calculateParentHeight();
});

$("#remove").on("click", function() {
  $(".parent .child:last").remove();
  calculateParentHeight();
});

function calculateParentHeight() {
  var height = 0;
  
  $('.parent .child').each(function() {
    height = height + $(this).height();  
  });

  $('.parent').css('height', height + 20 + 'px');
}

calculateParentHeight();

function addChild() {
  var top = 0;
  
  $('.parent .child').each(function() {
    top = top + $(this).height();  
  });

  $(".parent").append("<div class='child' style='top:" + top + "px;'>divvvvvv</div>");
}
* {
  box-sizing: border-box;
}

.parent {
  position: absolute;
  background: antiquewhite;
  width: 300px;
}

.child {
  position: absolute;
  background: yellow;
  width: calc(100% - 20px);
  height: 50px;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add">add</button>
<button id="remove">remove</button>

<div class="parent">
  <div class="child" style="position: absolute;">
    Div one
  </div>

  <div class="child" style="position: absolute; top: 50px;">
    div two
  </div>
  <div class="child" style="position: absolute; top: 100px;">
    div three
  </div>
</div>

Upvotes: 1

Related Questions