如何切片動態添加到元素的文本？

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