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

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/

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".

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).