如何使用jQuery删除不需要的HTML元素？

Question

在维基空间中，他们使用两个HTML元素之一作为维基空间中的按钮。在这里，他们是...

<button name="lock" type="submit" class="btn"><span><span>Lock Topic</span></span></button> 

或者...

<a onclick="jQuery(this).parents('form').submit();" class="btn"><span><span>Search Posts</span></span></a> 

<a class="btn primary" id="newPostTrigger" href="#"><span><span><img width="11" height="14" alt="New Post" src="http://www.wikispaces.com/i/icon_14_add.png"/> New Post</span></span></a> 

正如你可以在下面这张照片看，我已经清理的按钮与一些CSS不少。

，但所有这些不必要的<span>的，我不得不使用大量的CSS来处理所有默认的CSS是wikispaces插入用于跨度。

如何在a.btn元素以及jQuery按钮元素中删除<span>的内容？

感谢您的帮助！

Answer 1

在jQuery 1.4使用unwrap()提供部分解决方案：

$(".btn > span > span > img").unwrap().unwrap(); 

只能拆开包装，以便在内部跨度的文字你的榜样将不会与这方面的工作元素不但是文本。稍微混乱，但更普遍的解决方案（即会使用jQuery 1.3工作）是：

$(".btn").each(function() { 
    $(this).html($(this).find("div:last").html()); 
}); 

下面是一个例子：

$(function() { 
    $("#unwrap").click(function() { 
    $("div.btn").each(function() { 
     $(this).html($(this).find("div:last").html()); 
    }); 
    }); 
}); 

有：

div.btn { background: yellow; padding: 15px; margin: 15px; } 
div.btn div { background: green; padding: 15px; } 
div.btn div div { background: red; padding: 15px; 

和：

<div class="btn"> 
    <div> 
    <div><img src="logo.gif"></div> 
    </div> 
</div> 
<div class="btn"> 
    <div> 
    <div>Some text</div> 
    </div> 
</div> 
<input id="unwrap" type="button" value="Unwrap">