Как удалить ненужные элементы HTML с помощью jQuery?

Question

В wikispaces они используют один из двух HTML-элементов в качестве кнопок в wikispace. Вот они ...

<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 вставки для пролетов.

Как я могу удалить <span> в пределах как элемента a.btn, так и элемента кнопки с jQuery?

Спасибо за помощь!

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