Jquery erase text with type effect

Question

I write some script to add text with typing effect. I need to remove text like that effect but don't know how do that. If can please help.

JS Code :

var title = $(".form-title").attr("data-title");

$.each(title.split(''), function (i, letter) {
    setTimeout(function () {
         console.log(letter);
        $('.form-title').html($('.form-title').html() + letter);
    }, 500 * i);
});

JSFIDDLE

Answer 1

var title = $(".form-title").attr("data-title");
var interval = 200;
var wait = interval + (interval * title.length);

$.each(title.split(''), function (i, letter) {
    setTimeout(function () {
        $('.form-title').html($('.form-title').html() + letter);
    }, interval * i);
});
var i = title.length;
while(i >= 0){
    setTimeout(function () {
        var text = $('.form-title').html();
        var length = text.length - 1;
        $('.form-title').html(text.substring(0, length));
    }, wait + (interval * i) );
    i--;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2 class="form-title" data-title="Dear Concept Studio,"></h2>

Answer 2

You can trim the last letter of the HTML content with each iteration.

For example:

$('.form-title').html($('.form-title').html().substring(0, title.length-1-i));

https://jsfiddle.net/ecvbL0f7/2/