如何用JavaScript或jQuery删除含span兄弟元素的div文本节点最后字符

需求场景 #

现有HTML结构如下：

<div id="textarea">
abcd
<span id="cursor"></span>
</div>

需要删除#textarea元素中文本节点的最后一个字符d，同时保留兄弟节点<span id="cursor"></span>。

原生JavaScript实现 #

通过获取目标div的子节点，筛选出有效文本节点后修改其内容：

const textareaDiv = document.getElementById('textarea');
// 遍历div的所有子节点
for (const node of textareaDiv.childNodes) {
  // 匹配非空的文本节点
  if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim()) {
    // 移除文本节点的最后一个字符
    node.nodeValue = node.nodeValue.slice(0, -1);
    break; // 找到目标节点后停止遍历
  }
}

jQuery实现 #

利用jQuery的contents()方法获取所有子节点，筛选后修改文本内容：

$('#textarea').contents().filter(function() {
  // 筛选出非空的文本节点
  return this.nodeType === Node.TEXT_NODE && $.trim(this.nodeValue);
}).each(function() {
  // 移除最后一个字符
  this.nodeValue = this.nodeValue.slice(0, -1);
});

内容的提问来源于stack exchange，提问作者Pritesh Vikram