根据children元素的更改增加或减少父div高度

Question

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

＆＃13;

＆＃13;

 $("#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();
});

＆＃13;

  #parentDiv
	    {
	     background: antiquewhite;
	     }
	    .childDiv
	    {
	    background: yellow;
      width: 700px; 
      height: 50px;
	     }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我有一个父div，在此我将追加并删除HTML元素作为子元素，如果我删除子元素父div必须自动缩小其高度，如果我添加它必须自动扩展，我的要求是父和孩子必须有绝对的位置（style =＆＃34; position：absolute＆＃34;）

Answer 1

$("#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>

Answer 2

在添加和删除子项时更改父div的高度

 $("#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>