How Can You Remove Unnecessary HTML elements with jQuery?

Question

In wikispaces, they use one of two HTML elements as buttons in a wikispace. Here they are...

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

Or...

<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"/&gt; New Post</span></span></a>

As you can see in this photo below, I've cleaned up the buttons quite a bit with some CSS.

But with all those unnecessary <span>'s, I'm having to use a lot of CSS to deal with all of the default CSS that wikispaces inserts for the spans.

How could I remove the <span>'s within both the a.btn element, as well as the button element with jQuery?

Thanks for your help!

Answer 1

In jQuery 1.4 use unwrap() provides a partial solution:

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

You can only unwrap elements not text however so your example with text in the inner span won't work with this. A slightly messier but more general solution (that'll work with jQuery 1.3) is:

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

Here's an example:

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

with:

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

and:

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