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

Question

我正在开发一个用户可以在其中键入消息的应用程序。 它有自己的键盘，然后单击每个字母以在框中键入。 我还有一个删除按钮，您可以在其中单击以删除键入内容的最后一个字母。 但是，我的jQuery无法正常工作。

这是我的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);
});
});

我还关注了这篇有关修改链接元素的帖子 ，但是它们的解决方案对我不起作用。

谁能帮我弄清楚发生了什么事？ 非常感谢。

Answer 1

您缺少2个部分。 1. str已经是一个字符串， innerHTML不是字符串的属性2.拼接后，需要将其设置回html

因此，您需要将删除功能更新为

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