KendoUI - Создание / уничтожение сплиттера программно

Question

В моем проекте мне нужно создавать и удалять сплиттеры на лету. Мы используем KendoUI.

Создание разделителей программно - это хорошо. Это удаление сплиттеров, о которых я беспокоюсь. Я посмотрел на API для управления сплиттером, и он имеет destroy метод, но это не удаляет виджет из DOM.

Я думаю, что единственный вариант для меня - это удалить его вручную из DOM. Поэтому я проверил, что функциональность разделителя элементов создает / изменяет, а затем возвращает его обратно в исходное состояние.

Это код, который я написал до сих пор:

HTML

<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>

JavaScript

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

Я также создал скрипку для этой функции - https://jsfiddle.net/7gyfr1v6/3/.

Так что код выше работает. В скрипке, когда я нажимаю на Create Splitter, это создает их, и когда я нажимаю на Destroy Splitter, это удаляет функциональность сплиттера. Однако манипулирование CSS для достижения этого звучит немного странно.

Есть ли лучший способ сделать это? Если нет, есть ли какие-либо проблемы, которые вы видите в коде, который я написал, и можно ли улучшить этот код?