Hi,

You can check the following code!

<script type="text/javascript">
        var nCount = 0;
        var prevListItem = null;
        var curSelectedItem = null;

        function Insert() {
            var newElement = document.createElement("li");
            newElement.innerHTML = "Option " +nCount ;
            newElement.setAttribute("onclick", "FetchValue(this);");
            document.getElementById('list').appendChild(newElement);
            nCount++;
        }

        function Delete() {

            try {
                if (curSelectedItem != null &&
                    nCount > 0) {
                    document.getElementById('list').removeChild(curSelectedItem);
                    nCount--;
                }
            }
            catch (e) {
                
            }
            
        }

        function FetchValue(listItem) {
            listItem.style.background = "#FF00FF";
            document.getElementById('selectedValue').innerHTML = listItem.innerHTML;

            if (prevListItem != null && prevListItem != listItem)
                prevListItem.style.background = "#FFFFFF";

            curSelectedItem = listItem;

            prevListItem = listItem;

            
        }

    </script>

<div style="border:1px solid #00FF00;width:150px;height:200px;margin:0px;padding:0px;overflow:auto;">
        <ul id="list" style="list-style:none none inside;margin:0px;padding:0px; cursor:pointer; " >
            
        </ul>
    </div>

    <div>
        <input type="button" value="Insert" onclick="Insert();" />
        <input type="button" value="Delete" onclick="Delete();" />
    </div>
    <div>
        Selected Item: <span id="selectedValue"></span>
    </div>

The above code shows how to dynamically add data to the custom listbox and delete it. You can also do that by adding static data to it!

Hope it helps u...