How to add a delete/remove button per each option item in html select?

Question

I need to create or use a library to create a custom HTML <select> to delete each item in the HTML <select>. Something like this:

<select>
    <option value="volvo">Volvo</option> <button>delete</button>
    <option value="saab">Saab</option> <button>delete</button>
    <option value="mercedes">Mercedes</option> <button>delete</button>
    <option value="audi">Audi</option> <button>delete</button>
</select>

I have searched how to do this and for any library that might exist to do this, but I haven't found anything. In iOS exists this. I need something like that but for HTML.

UPDATE: Something like this http://jsfiddle.net/b22ww/2/

Answer 1

Use this:

<ul>
    <li><input type="radio" name="list" value="volvo">Volvo <button>delete</button></li>
    <li><input type="radio" name="list" value="saab">Saab <button>delete</button></li>
    <li><input type="radio" name="list" value="mercedes">Mercedes <button>delete</button></li>
    <li><input type="radio" name="list" value="mercedes">Mercedes <button>delete</button></li>
</ul>

Then add event listeners to each button that removes the parent <li> from the list (Demo at jsfiddle.net).

Answer 2

What you need to achieve, it's quite impossible using select. What you need is to create something like a listview, like this:

HTML

<ul>
    <li>item one <div class='deleteMe'>X</div></li>
    <li>item two <div class='deleteMe'>X</div></li>
    <li>item three <div class='deleteMe'>X</div></li>
    ....
</ul>

and bind a click handler

JS

$(".deleteMe").on("click", function(){
   $(this).closest("li").remove(); 
});

see this example

FIDDLE http://jsfiddle.net/zZ3mc/

Answer 3

If you are open to using jQuery plugins, chosen allows you to customize select elements. In your case, look at the section called "Selected and Disabled Support".