New to Kendo UI for jQuery? Download free 30-day trial

Add Close Button to Tabs

TabStrip tabs can be removed programmatically via JavaScript. The following example shows how to add buttons inside the tabs that do this.

The milestones of the approach are:

  • The buttons must be placed in a <span> element, which wraps the whole tab text.
  • When adding a new tab with a button programmatically, encoded should be set to false.
  • The tabGroup field. and the append and remove TabStrip methods are used.
  • A data-type="remove" attribute is used to distinguish the tab remove buttons.

  .k-tabstrip-items li .k-button {
    line-height: 1;
    padding: 0;
    vertical-align: top;
    margin-bottom: -2px;

  .k-tabstrip-items li .k-icon {
    margin: 0;


<div id="tabstrip">
    <li class="k-state-active">Item 1</li>
    <li><span>Item 2 <button data-type="remove" class="k-button k-button-icon"><span class="k-icon k-i-close"></span></button></span></li>
    Content 1
    <p><button type="button" class="k-button" id="appendButton">Append Item</button></p>
    Content 2

    // initialize the TabStrip. Server wrappers will generate the below line automatically

    // get the widget reference
    var tabstrip = $("#tabstrip").data("kendoTabStrip");

    tabstrip.tabGroup.on("click", "[data-type='remove']", function(e) {

        var item = $(".k-item");

    var tabCounter = tabstrip.items().length;

        text: 'Item ' + (++tabCounter) + ' <button data-type="remove" class="k-button k-button-icon"><span class="k-icon k-i-close"></span></button>',
        encoded: false,
        content: "<p>Appended item " + tabCounter + " content</p>"


See Also

For more runnable examples on the Kendo UI TabStrip widget, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article