Как удалить элемент, но не содержимое внутри него?

Как я могу удалить элемент, но не содержимое внутри этого элемента?

<a href="#">
    <span>
        <img src="pic-1.jpg"/>
    </span>
</a>

Я хочу удалить span, который обертывает изображение.

Итак, я могу получить

<a href="#">

    <img src="pic-1.jpg"/>

</a>

Ответы

Вам нужно unwrap

$('img').unwrap();

$(document).ready(function(){
  $span = $('span');
  $span.replaceWith($span.html());
});

Функция jQuery unwrap() - это то, что вы ищете:

Удалите родительские элементы набора согласованных элементов из DOM, оставив соответствующие элементы на своем месте.

Вам нужно немного изменить свою HTML-архитектуру здесь:

<a href="#" id="my_href">
    <span id="my_span">
        <img src="pic-1.jpg"/>
    </span>
</a>

Решение jQuery:

$("#my_href").html($("#my_span").html());

Решение без jQuery:

document.getElementById("my_href").innerHTML = document.getElementById("my_span").innerHTML;