How to slice text dynamically added to an element?

Question

I'm making an app where users can type messages. It has its own keyboard, and you click on each letter to type in the box. I also have a delete button, where you can click on it to delete the last letter of what you typed. However, my jQuery isn't working.

Here's my Codepen .

JQuery:

$(document).ready(function () {
var myArray = ['Q', 'W', 'E', 'R', 'T', 'Y']
$.each( myArray, function( i, item ) {
var key = "<div class='letter'>" + item + "</div>";
$(".keyboard").append(key);
});

$('.letter').click(function (){
$('#text').append($(this).text());
});

$("#delete").click(function() {
var str = $('#text').text();
str.innerHtml.slice(0,-1);
});
});

I also followed this post on modifying link elements, but their solution didn't work for me.

Can anyone help me figure out what's going on? Thanks so much.

Answer 1

You were missing on 2 parts. 1. str is already a string and innerHTML is not a property of string 2. After you splice it you need to set it back in html

Hence, you need to update your delete function to following

$("#delete").click(function() {
    var str = $('#text').text();
    $('#text').text(str.slice(0,-1));
});