Как я могу удалить окружающий DIV с помощью jQuery?

Question

В википространствах, когда вы добавляете оглавление в область основного контента, любой заголовок (h1-h6), который вы используете в этой области основного контента, автоматически помещается в оглавление и служит якорной ссылкой, которая при щелкнув мышью, вы переместитесь вниз по странице к заголовку, указанному в оглавлении.

По умолчанию вики-пространства окружают якорные ссылки в оглавлении элементом div, который в зависимости от заголовка, который вы используете в основной области контента (h1-h6), применяет к нему больший левый отступ. Вот разметка содержания только заголовков h2 ...

<div style="margin-left: 2em;"><a href="#toc1">Hello there</a></div>
<div style="margin-left: 2em;"><a href="#toc2">How are you?</a></div>
<div style="margin-left: 2em;"><a href="#toc3">Here's an External Link</a></div>
<div style="margin-left: 2em;"><a href="#toc4">Here's an Example Heading</a></div>
<div style="margin-left: 2em;"><a href="#toc5">Here's an Even Longer Example Heading</a></div>

Я бы хотел полностью удалить уродливые и ненужные встроенные DIV-стили в стиле CSS и обернуть оглавление неупорядоченным списком с якорными ссылками, обернутыми элементами списка. Таким образом, используя jQuery, разметка выше будет преобразована в более семантическую разметку ... неупорядоченный список.

<ul>
<li><a href="#toc1">Hello there</a></li>
<li><a href="#toc2">How are you?</a></li>
<li><a href="#toc3">Here's an External Link</a></li>
<li><a href="#toc4">Here's an Example Heading</a></li>
<li><a href="#toc5">Here's an Even Longer Example Heading</a></li>
</ul>

JQuery должен компенсировать, сколько заголовков пользователь может разместить в основной области содержимого. Таким образом, в основном, несмотря ни на что, оглавление всегда будет заключено в неупорядоченный список, независимо от того, сколько элементов списка существует ...

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

Answer 1

Примерно так должно работать:

// Insert a UL after the h1 tag
var $ul = $("<ul></ul>").insertAfter($("div#toc > h1"));

// Find all the toc links
$("a[href^=#toc]").each(function(){
    var $li = $("<li></li>"),
        $parent = $(this).parent();

    // Append auto deletes it from its old position
    $li.append(this);

    // Remove the empty div
    $parent.remove();

    // Add the li to the ul
    $ul.append($li);
})