How to add delete / delete button for each parameter in html select?

Question

I need to create or use a library to create custom html to remove every element in html select. Something like that:

<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 was looking for how to do this, and for any library that might exist for this, but I did not find anything. On iOS there is this . I need something similar, but for html.

UPDATE: Something like 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 is completely impossible with select . You need to create something like listview , for example:

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 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 your selections. In your case, see the "Selected and Disabled Support" section.

Answer 4

This is invalid HTML. You cannot do this.

You can do this using SIMULATED select (a bunch of HTML / JS that behaves like select, but not one)

Answer 5

You cannot have a button within a selection. One alternative is to move it out of choice, as in this demo .

HTML:

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

Sample script:

 var button=document.getElementsByTagName("button")[0], select=document.getElementsByTagName("select")[0]; button.onclick=function(){ select.removeChild(select.options[select.selectedIndex]); };