Question

可以这样做吗？我正在预览窗口内构建一个带有可调整大小和可拖动元素的模板生成器。问题是，当我去生成HTML时，每个元素都添加了所有JQueryUI类和div，这在最终产品中是不可取的。我希望输出HTML足够简单，我可以扩展位置和大小，以便它可以是它自己的页面，但我找不到一种方法来保持预览窗口尽可能自定义并仍然得到干净的HTML出来的。以前有人做过这样的事吗？想法？想法？提前谢谢。

编辑：换句话说，我想以某种方式处理这个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>

并最终得到更像这样的东西：

<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

对于几乎每个Jquery UI对象，您可以调用一个'destroy'方法来删除所有特殊的html。

Answer 2

如果你想从DOM中删除元素，jQuery有一个方法empty和remove

jQuery对话框的示例（假设您希望在同一个div上有多个对话框：

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

通过这种方式，您可以确保在销毁对话框后DOM保持清洁。

清理JQueryUI生成的HTML？

2 个答案: