使用jQuery删除父范围标签？

Question

I want to remove both span tag using Jquery from following code Because div is child of span it will give errors in w3validators:

    <td class="col-1 col-first">
    **<span>
    <span>**
    <div class="user-picture">
    <a href="/users/shoprite-mp" title="View user profile.">
    <img typeof="foaf:Image" src="http://locationbasedmedia.co.za/sites/default/files/styles/thumbnail/public/pictures/picture-580-1379344365.jpg" alt="Shoprite Mp's picture" title="Shoprite Mp's picture"/>
    </a>
    </div>
    **</span>
    </span>**
    </td>

Answer 1

use

$(".user-picture").unwrap();
$(".user-picture").unwrap();

Used unwrap twice as to remove both parent spans and keep the internal structure.

Answer 2

Another solution would be this:

$('td').click(function () {
    var content = $('.user-picture', this).detach();
    $(this).append(content);
    $('span', this).remove()l
});

unwrap works perfectly well for your scenario, but at times you want to move the .user-picture around a bit more than just 2 levels, detach helps with that while keeping the object (including it's attributes and events) intact.