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

Remove DropDownList Items

Environment

Product Progress® Kendo UI® DropDownList for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I remove items from a Kendo UI DropDownList?

Solution

The following example demonstrates how to achieve the desired scenario.

    <input id="color" />
    <button class="k-button" id="remove">Remove items</button>  

    <script>
      $(document).ready(function() {
        var data = [
          { text: "Black", value: "1" },
          { text: "Orange", value: "2" },
          { text: "Grey", value: "3" }
        ];

        // create DropDownList from input HTML element
        $("#color").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          dataSource: data
        });

        $("#remove").click(function() {
          var ddl =  $("#color").data("kendoDropDownList");

          var oldData = ddl.dataSource.data();

          ddl.dataSource.remove(oldData[0]); //remove first item
          ddl.dataSource.remove(oldData[oldData.length - 1]); //remove last item
        });
      });
    </script> 

See Also

In this article