如何切片动态添加到元素的文本？

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));
});