JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child1">
   Child 1
  </div>
  <div class="child2">
   Child 2
  </div>
  <div class="child3">
   Child 3
  </div>
</div>

<button class="test">
Remove Child 2
</button>
</button>

CSS

.parent{
  border:1px solid red;
  height:auto;
}

.child2{
    transition: all 0.4s ease-in-out;
    max-height:1em;
    opacity:1;
}

JavaScript

document.querySelector('.test').addEventListener('click', removeEvent, false);

function removeEvent(){
  var thisChild = document.querySelector('.child2');
  
  thisChild.style.opacity = 0;
  thisChild.style['max-height'] = 0;
}

// In case we want to get fancy and completely remove child2
document.querySelector('.child2').addEventListener('transitionend', destroyDOMNode, false);

function destroyDOMNode(el){
  el.target.parentNode.removeChild(e.target);
}