Deleting items from a dropdown menu

Question

I am looking for feedback on the best way to remove items from a dropdown menu.

We are making a section of a web-app where the user can create new list (i.e. List 1). When these lists are created, they are added to a dropdown so the user can select an existing list instead of creating a new list. We also want the user to have the ability to remove lists from the dropdown but are stuck on the best way to do this. Some have suggested that we have delete x's in the dropdown menu, and that this could be combined with a pop-up modal to confirm deletion, but I have never seen this in practice. Our current method is to have a delete button that deletes the selected list from the dropdown.

Anyone have any suggestions about the best way to do this?

Answer 1

A drop-list or a combination box usually provide a list of choices and allows users to specify custom choices. Therefore, it's not recommended to inject or hide another action (in your case, delete) within this control.

Apple OS X UI Element Guidelines:

List only items that users can choose singly. A combo box does not allow multiple selections, so be sure to offer users a list of items from which they can choose only one at a time.

Microsoft Design Guidelines:

Are the options commands? If so, use a menu button or split button instead. Use drop-down lists and combo boxes for objects (nouns) or attributes (adjectives), but not commands (verbs).

Managing lists in a drop-list is not the best way

In my opinion, the best way to manage a list is to have a dedicated management page/section where user can edit, delete, and perform other actions to a list. This is beneficial because:

a) it's a consolidated page where user can easily find;

b) if the list grows, user is able to manage a large list better/easier;

c) you can implement other actions like delete multiple lists where it's not possible in a drop-list environment.