<script id="panelbar-template" type="text/kendo-ui-template">
    #: item.text #
    # if (!item.items) { #
    <a class='delete-link' href='\#'></a>
    # } #
</script>
<div class="demo-section">
    @(Html.Kendo().PanelBar()
        .Name("panelbar")
        .TemplateId("panelbar-template")
        .DataSource(source =>
        {
            source.Read(read => read.Action("Read_TemplateData", "PanelBar"));
        })
    )
</div>
<script type="text/javascript">

    $(document).on("click", ".delete-link", function (e) {
        e.preventDefault();

        var panelbar = $("#panelbar").data("kendoPanelBar");
        panelbar.remove($(this).closest(".k-panelbar-item"));
    });

</script>

<style>
    #panelbar {
        width: 300px;
        margin: 0 auto;
    }

    #panelbar .k-sprite {
        background-image: url("@Url.Content("~/Content/web/treeview/coloricons-sprite.png")");
    }

    .rootfolder { background-position: 0 0; }
    .folder     { background-position: 0 -16px; }
    .pdf        { background-position: 0 -32px; }
    .html       { background-position: 0 -48px; }
    .image      { background-position: 0 -64px; }

    .delete-link {
        width: 12px;
        height: 12px;
        background: transparent url("@Url.Content("~/Content/web/treeview/close.png")") no-repeat 50% 50%;
        overflow: hidden;
        display: inline-block;
        font-size: 0;
        line-height: 0;
        vertical-align: middle;
        margin: -1px 0 0 3px;
        -webkit-border-radius: 5px;
        -mox-border-radius: 5px;
        border-radius: 5px;
    }
</style>