KendoUI - Creating/destroying splitter programmatically

Question

In my project I need to create and remove splitters on the fly. We're using KendoUI.

Creating splitters programmatically is fine. It's removing the splitters I am concerned about. I looked at the API for the splitter control and it has a destroy method but that does not remove widget from the DOM.

I think the only option left for me is to remove it manually from the DOM. So what I did was I inspected the elements splitter functionality creates/modifies and then revert those back to the original state.

This is the code I have written so far:

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

I have also created a fiddle for this functionality - https://jsfiddle.net/7gyfr1v6/3/.

So the code above works. In the fiddle, when I click on Create Splitter, it creates them and when I click on Destroy Splitter, it removes the splitter functionality. However manipulating CSS for achieving this sounds a bit hacky.

Is there any better way to accomplish this? If not, are there any issues that you see in the code I have written and can this code be improved?