jQuery 如何为html选择中的每个选项项添加删除/删除按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18880823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a delete/remove button per each option item in html select?
提问by epool
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:
我需要创建或使用库来创建自定义 HTML<select>以删除HTML中的每个项目<select>。像这样的东西：
<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.
我已经搜索了如何执行此操作以及可能存在的任何库来执行此操作，但我什么也没找到。在 iOS 中存在这个. 我需要类似的东西，但对于 HTML。
UPDATE:Something like this http://jsfiddle.net/b22ww/2/
采纳答案by Bergi
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).
然后将事件侦听器添加到<li>从列表中删除父级的每个按钮（jsfiddle.net 上的演示）。
回答by BeNdErR
What you need to achieve, it's quite impossible using select. What you need is to create something like a listview, like this:
您需要实现的目标，使用select. 您需要的是创建类似 a 的东西listview，如下所示：
HTML
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
JS
$(".deleteMe").on("click", function(){
$(this).closest("li").remove();
});
see this example
看这个例子
回答by Christophe
回答by BharathRao
I have done Something like this...
我做过这样的事情......
$(document).ready(function() {
$(".deleteMe").on("click", function() {
if (confirm('Are you sure to delete?')) {
$(this).closest("li").remove();
} else {
return false
}
return false;
});
$('li').click(function(e) {
alert($(this).text());
$('#selected').html('<img class="trigger" src = "https://i.stack.imgur.com/LFSrX.png">' + $(this).text().trim().slice(0, -1));
$('.dropdown-container').hide();
});
$(window).click(function() {
$(".dropdown").css("border", "1px solid #444");
$('.dropdown-container').hide();
});
$("#selected").on("click", function(e) {
$(".dropdown").css("border", "1px solid orange");
$('.dropdown-container').show();
return false;
});
}); li {
list-style: none;
background: white;
margin: 2px;
padding: 5px;
}
.deleteMe {
float: right;
color: red;
}
.dropdown-container {
display: block;
position: absolute;
border: 2px solid gray;
padding: 5px;
background: white;
width: 290px;
height: 200px;
overflow-y: scroll;
}
li:hover {
background-color: #ead6b7;
}
.dropdown {
position: relative;
border: 1px solid #444;
border-radius: 3px;
width: 300px;
height:30px;
background-color: #CCC;
padding-top: 10px;
padding-left: 3px;
}
.dropdown .trigger {
padding-top: 10px;
position: absolute;
right: 0;
top: 1px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selected" class="dropdown">
<img class="trigger" src="https://i.stack.imgur.com/LFSrX.png"> Select Something!
</div>
<div class="dropdown-container" style="display:none">
<li>item one selected
<div class='deleteMe'>X</div>
</li>
<li>item two selected
<div class='deleteMe'>X</div>
</li>
<li>item three selected
<div class='deleteMe'>X</div>
</li>
<li>item four selected
<div class='deleteMe'>X</div>
</li>
<li>item five selected
<div class='deleteMe'>X</div>
</li>
<li>item six selected
<div class='deleteMe'>X</div>
</li>
<li>item seven selected
<div class='deleteMe'>X</div>
</li>
<li>item eight selected
<div class='deleteMe'>X</div>
</li>
<li>item nine selected
<div class='deleteMe'>X</div>
</li>
<li>item ten selected
<div class='deleteMe'>X</div>
</li>
</div>I hope this will help some one!
我希望这会帮助某人！
回答by Christophe
You cannot have the button within the select. One alternate option is to move it outside the select, as in this demo.
您不能在选择中使用按钮。另一种选择是将其移到选择之外，如本演示中所示。
html:
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]);
};
回答by Diodeus - James MacFarlane
This is not valid HTML. You cannot do this.
这不是有效的 HTML。你不可以做这个。
You can do this using a SIMULATED select (a bunch of HTML/JS that behaves like a select, but is not one)
您可以使用 SIMULATED 选择（一堆 HTML/JS 的行为类似于选择，但不是一个）来做到这一点
