使用jQuery移除复选框旁的‘N’：点击第一列时的实现问题

需求 #

点击表格第一列（Carrier列）的单元格时，移除该行所有复选框旁边的“N”字符（该字符通过CSS ::before 伪元素生成）。

之前方法的问题 #

• 第一种方法用nextSibling.remove()：存在拼写错误nextSilbing，且nextSibling指向的是整个DOM节点（比如后续的<td>），直接调用remove()会删除整个节点，而非仅移除“N”字符。
• 第二种方法$(this).nextAll().remove("N")：remove()方法的参数是选择器，不是文本内容，因此会删除所有匹配nextAll()的元素；后续的.end().remove()还会删除当前点击的单元格，导致大量内容丢失。

正确实现方案 #

由于“N”是通过CSS伪元素::before生成的，无法直接用JS删除伪元素，我们可以通过给目标行添加类，再用CSS控制伪元素内容为空来实现效果：

1. 补充CSS样式 #

/* 新增类，用于清空复选框的::before内容 */
.hide-checkbox-n input::before {
  content: "" !important;
}

2. 修改jQuery代码 #

// 只绑定第一列td的点击事件
$('#table_output tbody').on('click', 'td:first-child', function() {
  // 获取当前点击单元格所在的行
  const $row = $(this).closest('tr');
  // 给该行添加类，触发CSS隐藏伪元素的“N”
  $row.addClass('hide-checkbox-n');
});

补充说明 #

如果你的“N”不是通过伪元素生成，而是直接的文本节点，可以用以下方式移除：

$('#table_output tbody').on('click', 'td:first-child', function() {
  const $row = $(this).closest('tr');
  // 遍历该行所有包含复选框的td
  $row.find('td:has(input[type="checkbox"])').each(function() {
    // 移除td内的文本节点（即“N”字符）
    $(this).contents().filter(function() {
      return this.nodeType === 3 && this.textContent.trim() === 'N';
    }).remove();
  });
});

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