Javascript 如何在html select中为每个选项项添加删除/删除按钮？

我需要创建或使用一个库来创建一个自定义HTML来删除HTML中的每个项目。大概是这样的：

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

我已经搜索了如何做到这一点，以及可能存在的任何可以做到这一点的库，但我没有找到任何东西。在iOS中存在。我需要类似的东西，但HTML

---

更新：类似这样的内容

这是无效的HTML。你不能这样做

您可以使用一个模拟的select来实现这一点。一组HTML/JS的行为类似于select，但不是select。请使用以下方法：

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

---

然后将事件侦听器添加到从列表中删除父项的每个按钮。

要实现这一目标，使用select是不可能的。您需要创建类似listview的内容，如下所示：

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

HTML

看这个例子

---

FIDDLE

您不能在选择按钮中使用该按钮。另一种选择是将其移动到选择之外，如中所示

html:

---

如果您愿意使用jQuery插件，则允许您自定义选择元素。在您的情况下，请查看“选定和禁用支持”部分。

我做过类似的事情

$document.readyfunction{ $.deleteMe.onclick，函数{ 如果确认“您确定要删除吗？”{ $this.closestli.remove； }否则{ 返回错误 } 返回false； }; $'li'。单击函数E{ 警报$this.text； $'selected'.html+$this.text.trim.slice0，-1； $'.dropdown container'.hide； }; $window.clickfunction{ $.dropdown.cssborder，1px实心444； $'.dropdown container'.hide； }; $selected.onclick，function e{ $.dropdown.cssborder，1px实心橙色； $'.dropdown container'.show； 返回false； }; }; 李{ 列表样式：无； 背景：白色； 保证金：2倍； 填充物：5px； } .删除我{ 浮动：对； 颜色：红色； } .下拉式容器{ 显示：块； 位置：绝对位置； 边框：2倍纯色灰色； 填充物：5px； 背景：白色； 宽度：290px； 高度：200px； 溢出y：滚动； } 李：悬停{ 背景色：ead6b7； } .下拉列表{ 位置：相对位置； 边框：1px实心444； 边界半径：3px； 宽度：300px； 高度：30px； 背景色：CCC； 填充顶部：10px； 左：3倍； } .下拉.触发器{ 填充顶部：10px； 位置：绝对位置； 右：0； 顶部：1px； } 选择一些！ 选择项目1 X 项目二已选定 X 项目三选定 X 项目四选定 X 项目五选定 X 项目六选定 X 项目7选定 X 项目八选定 X 选定项目9 X 项目十选定 X

---

我认为您需要类似listview的东西，而不是select。然后我要补充的是，如果她打算以表单形式传递这些元素，他需要序列化这些元素或对这些元素执行其他操作，以便包含在发送回服务器的包中。通过一些繁重的jQuery工作，您可以对其进行重构，使其成为一个因子下拉选择。可能有一个jQuery UI插件已经做到了这一点。谢谢，这对使用另一个示例thanx提供帮助非常有帮助！：谢谢你的帮助！：D

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

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

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