How to remove a district div using jQuery?

Question

In Wikispaces, when you add a table of contents to the main content area, any title (h1-h6) that you use in this main content area is automatically placed in the table of contents and serves as a binding, which when you click on the link, moving the page down to The title referenced in the table of contents.

By default, wikispaces surrounds anchor links in the table of contents with a div that, depending on the title you use in the main content area (h1-h6), applies a larger left margin to it. Here's the markup for the table of contents of the h2 headers only ...

<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 an External Link</a></div> <div style="margin-left: 2em;"><a href="#toc4">Here an Example Heading</a></div> <div style="margin-left: 2em;"><a href="#toc5">Here an Even Longer Example Heading</a></div> 

I would like to completely remove the ugly and unnecessary inline CSS DSP styles and wrap the table of contents with an unordered list with anchor links wrapped in list items. That way, using jQuery, the markup above will be converted to large semantic markup ... an unordered list.

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

jQuery needs to compensate for how many headers the user can place in the main content area. Thus, basically, regardless of whether the table of contents will always be wrapped in an unordered list, no matter how many list items there are ...

Thanks for your help!

Answer 1

Something like this should work:

 // 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); })