Dynamically Create and remove the TextArea Using javascript

This is the demo about creating the multiple HTML textarea dynamically with CSS animations. Animations are covered fading, Sliding and Swing options and removing the textarea is also covered in this demo. Demo is written in plain JavaScript without any dependency and animations using CSS3.

Create and remove the TextArea Using javascript with Animations

Below you can find the steps to achieve the demo

CSS: Fade Effect

.fadeit div{
  transition: all 0.4s ease-out;
  opacity: 0;
}
.fadeit div.show {
  opacity: 1;
}

CSS: Slide Fade Effect

.slide-fade div{
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade div.show {
  opacity: 1;
}

CSS: Swing X & Swing Y Effect

.swingX,.swingY {
    perspective: 200px;
}
.swingX div {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
.swingY div {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swingX div.show,.swingY div.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

JavaScript: Add & Remove the textarea

Add textarea JS

function addElement(elId,e) {
    var holder = document.getElementById(elId),
        num = e.currentTarget.dataset.count++,
        divIdName = elId + num,
        newdiv = document.createElement('div');

    newdiv.setAttribute("id", divIdName);
    newdiv.innerHTML = "<textarea class=\"form-control\" name=\"text" + num + "\"></textarea><a href=\"javascript:;\" onclick=\"removeElement(\'" + divIdName + "\',\'" + elId + "\')\">Remove</a>";

    holder.appendChild(newdiv);
    setTimeout(function() {
        newdiv.className += "show";
    }, 10);
}

Remove textarea JS

function removeElement(divNum,elId) {
    var holder = document.getElementById(elId);
    var olddiv = document.getElementById(divNum);
    olddiv.className = "";
    
    setTimeout(function() {
        holder.removeChild(olddiv);
    }, 600);
}

HTML Code

<!-- Fading effect -->
<h2>Fading effect</h2>
<p><a data-count="0" onclick="addElement('fadeit',event);">Add</a></p>
<div class="fadeit" id="fadeit"></div>

<!-- Slide-fade effect -->
<h2>Slide-fade effect</h2>
<p><a data-count="0" onclick="addElement('slide-fade',event);">Add</a></p>
<div class="slide-fade" id="slide-fade"></div>

<!-- SwingX effect effect -->
<h2>SwingX effect</h2>
<p><a data-count="0" onclick="addElement('swingX',event);">Add</a></p>
<div class="swingX" id="swingX"></div>

<!-- SwingY effect effect -->
<h2>SwingY effect</h2>
<p><a data-count="0" onclick="addElement('swingY',event);">Add</a></p>
<div class="swingY" id="swingY"></div>

Demo