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

Question

在wiki空间中，它们使用两个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来处理wikispaces为跨度插入的所有默认CSS。

如何删除a.btn元素中的<span>以及带jQuery的button元素？

感谢您的帮助！

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">