how to remove selected item of list box after clicking on “ Delete Selected Item “ and Reset all items of listbox after clicking “Reset” button using JavaScript like .


Figure 1

After clicking on Delete Selected Item


Figure 2

And after clicking on Reset Button


Figure 3

For these add listbox inside body tag and add two button Delete Selected Item and Reset

  1. <asp:ListBox ID="lstbox" runat="server" SelectionMode="Multiple" Height="150px" Width="100px" >
  2. <asp:ListItem Value="1" Text ="Class 1"></asp:ListItem>
  3. <asp:ListItem Value="2" Text ="Class 2"></asp:ListItem>
  4. <asp:ListItem Value="3" Text ="Class 3"></asp:ListItem>
  5. <asp:ListItem Value="4" Text ="Class 4"></asp:ListItem>
  6. <asp:ListItem Value="5" Text ="Class 5"></asp:ListItem>
  7. <asp:ListItem Value="6" Text ="Class 6"></asp:ListItem>
  8. <asp:ListItem Value="7" Text ="Class 7"></asp:ListItem>
  9. </asp:ListBox>
  10. <button onclick="deleteSelect('lstbox');return false;">Delete Selected Item</button>
  11. <button onclick="window.location.reload();return false;">Reset</button>
And javaScript in head Tag
  1. <script>
  2. function deleteSelect(listid) {
  3. var listb = document.getElementById(listid);
  4. var len = listb.options.length;
  5. for (var i = listb.options.length-1 ; i >= 0 ; i--) {
  6. if (listb.options[i].selected == true) {
  7. listb.options.remove(i);
  8. }
  9. }
  10. }
  11. </script>
And now run the code

It May help to Anyone