如何用jQuery移除表格单元格指定文本且保留相邻DOM元素？

我有如下HTML代码：

<table> 
    <tr> 
        <td> <select id="foo"> 
                <option value="0" selected>0</option> 
                <option value="1" >1</option> 
            </select> 
            pcs 
        </td> 
    </tr> 
</table>

我需要用jQuery移除<select>元素后的“pcs”字符串。我尝试了以下代码：

mmjQuery("#foo").parent().text(mmjQuery("#foo").parent().text().replace('db', ''));

但这段代码会对select的DOM结构造成影响，请问正确的实现方法是什么？

你直接修改父元素的text()会把所有子元素替换成纯文本，自然会破坏select的DOM结构。下面是几种靠谱的实现方式：

方法一：精准移除目标文本节点 #

通过contents()获取父元素下的所有节点（包括文本节点），筛选出包含“pcs”的文本节点并移除：

mmjQuery("#foo").parent().contents().filter(function() {
  // 筛选类型为文本节点，且内容包含"pcs"的节点
  return this.nodeType === 3 && /pcs/.test(this.textContent.trim());
}).remove();

方法二：保留select重构父元素内容 #

如果确定父元素里只有select和目标文本，这种方式更简单：

const $select = mmjQuery("#foo");
const $parent = $select.parent();
// 清空父元素后重新插入select
$parent.empty().append($select);

方法三：清除文本内容而非移除节点 #

如果只是想去掉“pcs”文本而不删除整个文本节点，可以直接修改节点内容：

mmjQuery("#foo").parent().contents().filter(function() {
  return this.nodeType === 3;
}).each(function() {
  this.textContent = this.textContent.replace(/pcs/g, '').trim();
});

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