Sliding transition for list items when one is removed - css

Question

It has been a while since I last used CSS. I'm having trouble with this one. I have a list of items. When I click on the cross it removes the item from the DOM. However what I'm looking for is to make the rest of the items slide up when one has been removed.
Currently it just removes the item as desired but instantly moves the other to 'fill in the space'. I know there is a way to do it with CSS transitions, but the question is how...
var remove = function(id) {
document.querySelector('#'+id).remove();
}
div {
border: 1px solid grey;
width: 100px;
margin: auto;
margin-bottom: 10px;
text-align: center;
padding: 10px
}
span {
float: right;
cursor: pointer;
}
<div id="one">One <span onclick="remove('one')">×</span></div>
<div id="two">Two <span onclick="remove('two')">×</span></div>
<div id="three">Three <span onclick="remove('three')">×</span></div>
<div id="four">Four <span onclick="remove('four')">×</span></div>

Answer 1

Like this?
I added a class called closeSlide which will animate the element to slide up. And after the transition, it is removed by setting up a timer.
And for visual prettiness, I've added overflow:hidden to your target style, which can alternatively, be added via JS using elem.style.overflow = 'hidden'. But for justification, I added that to the target style because I want to avoid any possible jitters when initiating the closing animation.
var remove = function(id) {
var elem = document.querySelector('#'+id);
elem.className += 'closeSlide';
setTimeout(function(){
elem.remove();
}, 200);
}
div {
border: 1px solid grey;
width: 100px;
margin: auto;
margin-bottom: 10px;
text-align: center;
padding: 10px;
overflow:hidden;
}
span {
float: right;
cursor: pointer;
}
.closeSlide {
margin-bottom:0;
height:0px;
padding-top:0;
padding-bottom:0;
transition: 0.2s all ease-out;
/*Just reverse any spacing styling you've applied to make it **magically** disappear*/
}
<div id="one">One <span onclick="remove('one')">×</span></div>
<div id="two">Two <span onclick="remove('two')">×</span></div>
<div id="three">Three <span onclick="remove('three')">×</span></div>
<div id="four">Four <span onclick="remove('four')">×</span></div>