css
.modeWin{ 300px;height: 200px;border: 1px solid #000;margin-bottom:30px;}
.contant div{
300px;height: 200px;
font-size: 16px;color:pink;
border: 1px solid #000;
}
.contant div p{cursor:pointer;}
.btnshow{position:absolute;right:20px;top:20px;}
p{cursor:pointer;}
html
<div class="modeWin">
</div>
<div class="contant">
<button class="btnJia" style="margin-bottom:10px;">+</button>
<div style="position:relative;">
<button onclick="btnjian(this)" class="btnshow" style="display:none">减去</button>
<p>我是第一个盒子</p>
</div>
<div style="position:relative;top:20px;">
<button onclick="btnjian(this)" class="btnshow" style="display:none">减去</button>
<p>我是第二个盒子</p>
</div>
</div>
javascript
$('.btnJia').click(function(event) {
$('.btnshow').show(300);
});
var container = {}; //用这个键值对存储元素对应的此时父元素的值,一个对应关系
function btnjian(self){
var parentElemt = $(self).parent().html();
var childP = $(self).parent().children('P').text();
$(self).parent().hide(400);
var flag = new Date().getTime();
var pElemt = $('<p flag='+flag+' onclick="childp(this)">'+childP+'</p>');
$('.modeWin').append(pElemt);
container[flag] = parentElemt;
}
function childp(self){
// alert()
var flag = $(self).attr('flag');
var box = $('<div style=position:relative;top:10px;bottom:10px;>');
// console.log(container[flag])
box.append(container[flag])
$('.contant').append(box);
}