jQuery：删除元素后的所有内容

Question

我有这样的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(/ /g,''));

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

Answer 1

你可以试试：

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

Answer 2

您可以改为执行以下操作：

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

这将清除包含这些元素上的事件处理程序的父级，然后放回第一个<a> 。 它还会在您保留的锚点上保留任何事件处理程序， 您可以在此处进行尝试 。 将DOM元素传递给.html()是.empty()和.append() 的快捷方式 ，只是使其更加简洁。

Answer 3

那这个呢？

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

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

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

谢谢尼克。

Answer 4

最简单的方法是将要删除的“编辑/删除”链接包装在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，并加上空格。