javascript - jQuery add list with images instead of text characters when typing -

i have input , when i'm typing, let's say: a, want result <li class="a"><img src="a.png" /> if space => <li class="space"></li>. list appends ul.text.

also when press backspace need last item removed.

i have untill now, can't make work:

$('input').live('keyup', function(e){     this.value = this.value.touppercase();     var pressedletter = $(this).val().tolowercase();     $('ul.text').append('<li><img src="letters/'+pressedletter+'.png" alt="" /></li>'); }); 

any help, please? thanks.

you're appending new element on each keyup ul element. have change attributes of liand img elements instead.

$('input').live('keyup', function (e) {     this.value = this.value.touppercase();     var pressedletter = $(this).val().tolowercase();      if( $('ul.text').find('li').length < 1 && this.value.length > 0 ) {         $('ul.text').append('<li><img/></li>'); //append new elements (li,img) if doesn't exist     }else{             if (this.value.length < 1)  $('ul.text').find('li').remove(); //remove element if value.length < 1     }      $('ul.text').find('li').attr('class', this.value);     $('ul.text').find('img').attr('src', 'letters/' + pressedletter + '.png'); }); 

jsfiddle