Cleaning up the HTML generated by JQueryUI?

Question

Can this be done? I'm building a template generator complete with resizable and draggable elements inside a preview window. Problem is, when I go to get the HTML generated, each of the elements have all the JQueryUI classes and divs added, which are not desirable in the final product. I'd like the output HTML to be simple enough that I can scale up positions and sizes so that it could be its own page, but I can't find a way to keep the preview window as customizable as possible and still get clean HTML out of it. Anybody ever done something like this before? thoughts? ideas? Thanks in advance.

EDIT: In other words, I want to somehow process this html:

<div id="preview_title" value="Title" class="ui-draggable ui-resizable" style="visibility: visible; ">Title<div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; " unselectable="on"></div></div>
            <div id="preview_logo" value="Logo" class="ui-draggable ui-resizable" style="visibility: visible; ">Logo<div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; " unselectable="on"></div></div>
            <div id="preview_ticker" value="Ticker" class="ui-draggable ui-resizable" style="visibility: visible; ">Ticker<div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; " unselectable="on"></div></div>
            <div id="preview_clock" value="Clock" class="ui-draggable ui-resizable" style="visibility: visible; ">Clock<div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; " unselectable="on"></div></div>

and end up with something more like this:

<div id="preview_title" value="Title" style="visibility: visible; width: 400px; height: 16px; top: 32px; left: 12px; ">Title</div>
            <div id="preview_logo" value="Logo" style="visibility: visible; width: 50px; height: 50px; top: 123px; left: 16px; ">Logo</div>
            <div id="preview_ticker" value="Ticker" style="visibility: visible; width: 400px; height: 32px; top: 12px; left: 12px; ">Ticker</div>
            <div id="preview_clock" value="Clock" style="visibility: visible; width: 45px; height: 45px; top: 12px; left: 100px; ">Clock</div>

Answer 1

For almost each Jquery UI object you can call a 'destroy' method that removes all the special html.

Answer 2

if you want to remove the element from DOM, jQuery has a method for empty and remove

Example for a jQuery dialog (say you want multiple dialogs over the same div:

<div class="someFancyDialog">
    <label class="name"></label>
     ...
</div>
$(.someFancyDialog).bind('dialogclose', function(event, ui)
{
    $(event.target).empty().remove();
}
$(.someFancyDialog).dialog();

In this way, you are sure that the DOM remains clean after the dialog is destroyed.