如何移除元素内容的最后一个字符？div输入框退格功能实现方案

没问题！我来帮你搞定这个退格按钮的需求，根据你用$(".field").append(divContent)追加内容的不同情况，给你两种对应的实现方案：

情况1：你追加的是纯文本字符 #

如果每次append的是普通文本（比如用户输入的单个字符），那我们可以直接操作div的文本内容，去掉最后一个字符：

HTML 结构（补充按钮） #

<div class="field" contenteditable="true"></div>
<button id="backspaceBtn">退格</button>

（注：如果你的div还没加contenteditable="true"，记得加上，这样用户才能直接在里面输入内容）

jQuery 实现代码 #

// 给按钮绑定点击事件
$("#backspaceBtn").click(function() {
  // 获取当前输入框里的所有文本内容
  const currentContent = $(".field").text();
  
  // 只有当内容不为空时，才执行退格操作
  if (currentContent.length > 0) {
    // 截取掉最后一个字符，重新设置给div
    $(".field").text(currentContent.slice(0, -1));
  }
});

情况2：你追加的是DOM元素（比如每个字符是单独的小div） #

如果你的divContent是一个个DOM元素（比如<span>A</span>这种），那直接删除最后一个子元素更准确：

jQuery 实现代码 #

$("#backspaceBtn").click(function() {
  const field = $(".field");
  // 找到最后一个子元素并移除
  field.children().last().remove();
});

小提示 #

• 第一种方法用text()而不是html()，是为了避免把HTML标签当成普通字符处理，防止意外破坏结构；
• 加个非空判断是为了防止内容为空时还执行操作，避免出现不必要的错误。

内容的提问来源于stack exchange，提问作者Andy D