title: Resize textarea after deleting text
body: <p>If you write text, a <code>textarea</code> increases in size, but when you delete this text then nothing happens. Is it possible to dynamically decrease the height of a <code>textarea</code> if you are deleting text?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('textarea').on('input', function() {
    var scrollHeight = parseInt($(this).prop('scrollHeight'));
    $(this).height(scrollHeight);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.OuterDiv
  {
    width:200px;
    height:300px;
    border:1px solid #000;
    position:relative;
    bottom:0;
  }
  .text
  {
    resize:none;
    width:198px;
    height:45px;
    max-height:145px;
    background-color:rgba(90,90,180,1);
    font-size:16px;
    font-family:Arial;
    overflow-y:auto;
    padding:0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="OuterDiv"&gt;
    &lt;textarea class="text" placeholder="Write some text..."&gt;&lt;/textarea&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>