Удалить родительский элемент, но сохранить дочерний элемент с помощью jquery в HTML

Из нижеследующего HTML я хочу удалить теги div и H2, но сохраняю тег UL с помощью jquery.

Пожалуйста, сообщите, как я могу достичь этого.

<div class="row">
    <h2><asp:Literal ID="categoryTitle" runat="server"></asp:Literal></h2>
    <ul class="tree js-catTree" id="treeContainer" runat="server"></ul>
</div>

Спасибо

Ответы

Ответ 1

Вы можете использовать replaceWith()

$('.row').replaceWith(function() {
 return $('ul', this);
});

Рабочая демонстрация

Ответ 2

Я наткнулся на эту страницу, просто попробовав удалить родительский элемент (пока сохраняя его) - на всякий случай он полезен другим, я нашел unwrap чтобы быть именно тем, что мне нужно. Для меня это был простой поиск-элемент-и-разворот:

$('.target-child').unwrap();

Однако добавление удаления h2 в этом случае делает вещи немного более сложными:

$('.row h2').siblings('ul').unwrap().end().remove();

http://jsfiddle.net/t8uQ8/

Вышеуказанное должно быть более оптимальным, поскольку оно не зависит от использования анонимной функции создания и вызова.

Ответ 3

Вы можете использовать функцию jQuery detach()?

Это приведет к удалению элемента (визуально), но сохранит его код в переменной, затем вы можете добавить его в другой родитель.