Javascript KendoUI-以编程方式创建/销毁拆分器

在我的项目中，我需要动态创建和删除拆分器。我们用的是肯杜伊

以编程方式创建拆分器很好。它正在移除我关心的拆分器。我查看了splitter控件的API，它有一个方法，但不会从DOM中删除小部件

我认为留给我的唯一选择是从DOM中手动删除它。所以我所做的就是检查元素拆分器功能创建/修改的元素，然后将它们恢复到原始状态

这是我迄今为止编写的代码：

HTML 我还为此功能创建了一个提琴-

所以上面的代码是有效的。在小提琴中，当我单击

创建拆分器

时，它会创建拆分器，当我单击

销毁拆分器

时，它会删除拆分器功能。然而，通过操纵CSS来实现这一点听起来有点老套

---

有没有更好的方法来实现这一点？如果没有，您是否在我编写的代码中看到了任何问题，并且该代码是否可以改进

从未有过销毁一个小部件的案例，但出于某种原因，他们决定不按照中所述删除小部件元素。我想没关系吧？或者在创建时删除元素并重新使用相同id的新div（只是我的机会），谢谢！我的用例是构建一些可折叠的面板（类似于VisualStudio）。关于-

在创建时删除元素并使用相同的id重新使用新的div（这是我的难题）

：我已经考虑过了，但是这些div中有一些内容，我还必须重新创建它们。

<p>
<button id="createSplitter" type="button" class="k-button">Create Splitter</button>

<button id="destroySplitter" type="button" class="k-button">Destroy Splitter</button>
</p>

<div id="splitter">
    <div id="left">Left column</div>
    <div>Main content</div>
</div>

var leftPane = $("#left");
var splitterElement;
$("#createSplitter").click(function(e) {
splitterElement = $("#splitter").kendoSplitter({
    panes: [
        { collapsible: true, size: 200 },
        { }
    ]
});
});

$("#destroySplitter").click(function(e){
    var splitter = splitterElement.data("kendoSplitter");
    splitter.destroy();
    $('#splitter').removeClass('k-widget k-splitter').removeAttr('data-role');
    $('#splitter .k-splitbar').remove();
    $('#splitter .k-pane')
    .removeClass("k-pane k-scrollable")
    .removeAttr("style");
});