使用jQuery移除span、i、br标签，保留链接文本的问题排查

我尝试通过动态循环移除<span>、<i>和<br>标签，只保留<a>链接里的文本，但代码没达到预期效果，请问哪里错了？

我的HTML结构：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
<a href="/1">
<span class="inline">
<i class="fa fa-question"></i>
<br>Help
</span>
</a>
<a href="/2">
<span class="inline">
<i class="fa fa-gear"></i>
<br>Fix
</span>
</a>
</div>

我写的jQuery代码：

$('#links a').each(function(){ var this = $(this), span = this.find('span'), text = span.text(); span.remove(); this.append(text); });

问题出在这两个地方： #

1. this是JavaScript保留关键字，不能用作变量名
   你把$(this)赋值给了名为this的变量，这会直接触发语法错误，浏览器根本不会执行这段代码。得换成其他变量名，比如$link。

2. 处理方式太繁琐，且没清理冗余空白
   你只把<span>里的文本移出来，但<i>和<br>带来的换行、空白字符还会残留，而且没必要单独操作<span>——直接提取<a>标签内的纯文本更高效。

修正后的代码 #

可以用两种简洁的方式实现需求：

方式1：each循环处理

$('#links a').each(function() {
  // 用$link代替this作为变量名，避免关键字冲突
  var $link = $(this);
  // 提取纯文本并去掉多余的换行、空格
  var cleanText = $link.text().trim();
  // 清空链接内容，再添加纯文本（自动移除所有嵌套标签）
  $link.empty().text(cleanText);
});

方式2：更精简的text()回调写法

jQuery的text()方法支持传入回调函数，自动遍历每个目标元素：

$('#links a').text(function() {
  // 返回当前链接的纯文本（已自动忽略所有标签），并去掉冗余空白
  return $(this).text().trim();
});

最终效果 #

执行后你的链接会变成干净的结构：

<a href="/1">Help</a>
<a href="/2">Fix</a>

完美移除了所有不需要的标签，只保留核心的链接文本。

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