jquery：删除元素后的所有内容答案

【问题标题】：jquery: removing everything after an elementjquery：删除元素后的所有内容
【发布时间】：2010-09-03 04:39:10
【问题描述】：

我有这样的html代码：

<li>
<a href=''>Example</a>&nbsp;<a href='' class='sub'>Edit</a>&nbsp;<a href='' class='sub'>Delete</a>
</li>

我想删除第一个 </a> 之后的所有内容，包括空格。最优雅和最简单的方法是什么？我用下面的 jquery 达到了我的目的：

$('li').children(".sub").remove();    
$('li').html($('li').html().replace(/&nbsp;/g,''));

但第二行看起来太像黑客了。有没有更好的办法？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

你可以试试：

$('li').html($('li a:first-child'));

【讨论】：

【解决方案2】：

你可以这样做：

$('li a:first-child').each(function() {
    $(this).parent().html(this);
});

这将清除父元素，包括这些元素上的事件处理程序，然后将第一个 <a> 放回去。它还将维护您保留的锚点上的任何事件处理程序，you can give it a try here。将 DOM 元素传递给 .html() 是 a shortcut 对于 .empty() 和 .append()，只是让它更简洁一些。

【讨论】：

感谢 jsfiddle 的链接，看起来非常有用！

【解决方案3】：

最简单的方法可能是将要删除的编辑/删除链接包装在 div（或您选择的其他元素）内，然后一次将其全部删除。第一行代码就差不多完成了。

您可以执行以下操作，而不是在每个锚点上放置 class='sub' ：

<li>
<a href=''>Example</a><div class='sub'>&nbsp;<a href=''>Edit</a>&nbsp;<a href=''>Delete</a></div>
</li>

然后你会有：

$('li').children(".sub").remove();

就像你现在做的那样，它应该删除带有空格的 div。

【讨论】：

这是一个很好的建议，我可能最终不得不这样做，但现在我更愿意使用尽可能少的额外 html。有了 Mic 的建议，我什至可以摆脱“.sub”类。

【解决方案4】：

这个呢？

$('li').html($('li').find("a:first").html())

编辑1：上面的代码是错误的。请尝试以下操作：

$('li').find("a:first").appendTo($('li').html(""));

谢谢尼克。

【讨论】：

这会将 HTML inside 附加到锚点中，而不是保留锚点:)
你确定吗？我已经对其进行了测试并且它可以工作...... $('li').find("a:first").html() 获取锚的html。答案应该是给出
Example

是的，在这里尝试一下：jsfiddle.net/nick_craver/Vp47G/2 注意“示例”不再是链接 :)

谢谢，你说得对……我又把它放在一行中:)。但这次成功了。