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>放回去。它还会在您保留的锚点you can give it a try here上维护任何事件处理程序。对于.html()和a shortcut，将DOM元素传递到.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。