Home / Frontend Codes and Demos / JavaScript / Dynamically Create and remove the TextArea Using javascript
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.

Dynamically Create and remove the TextArea Using javascript

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

About CV

I'm frontend developer

Check Also

Develop html table using css div tags

Develop html table using css div tags

This tutorial will explain how to form HTML table using css div tags without using table tags. This tutorial supports fixed header on scrolling table body and support responsive table.