Javascript 使用jquery从选择框中删除所选内容

我有一个选择框，我想用jquery从中删除所选选项。 请告知我如何使其工作： 以下是标记的代码：

@foreach (var item in Model.Names)
            {
                <div>                        
                    <div class="editor-field">
                        <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  
                    </div>
                    <div>  
                    <a href="#" id="remove">Remove selection</a>  
                    </div>  
                </div>
            }   

@foreach（Model.Names中的变量项）
{
}   

有三个选择框，每一个我都需要添加一个用于删除选择的超链接。

---

提前感谢，Laziale

首先，您应该将

id=“remove”

更改为

class=“remove”

，因为您将拥有多个这些元素，并且多次使用同一id不是有效的HTML

您可以使用jQuery选择锚定标记并绑定一个事件处理程序，该事件处理程序删除锚定的父元素（其中还包含

元素）：

下面是一个演示：

请注意，

.on（）

在jQuery 1.7中是新的，在本例中与使用

.bind（）

相同：

如果只想删除与每个链接关联的

元素，可以将其作为删除的目标：

$(function () {
    $('.remove').on('click', function () {
        $(this).parent().parent().find('select').remove();
        return false;
    });
});

下面是一个演示：

更新 我刚刚重新阅读了您的问题，如果您想在按下链接时删除选定的索引，请执行以下操作：

$(function () {
    $('.remove').on('click', function () {
        
        var $select = $(this).parent().parent().find('select');
        $select.children().filter(':selected').remove();
        return false;
    });
});

这里有一个演示：

工作小提琴

加成

---

是否要删除所选内容或所选元素

由于元素的移除已得到回答，因此在这种情况下，它只是选择：

$('.remove').click(function(){    
  $(this).closest('select').children().is(':selected').prop("selected",null);
});

编辑：

---

ID必须是唯一的，因此如果代码在循环中运行，它将无法工作。

.closest（）。因此，
$（this）.closest（'select'）
在给定HTML结构的情况下永远不会选择任何内容。好吧，你已经找到了答案：）。这将找到第一个
div
祖先元素，它只包含
Ok，但您应该在回答中注意，您更改了HTML的结构，因为如果OP不对HTML结构进行相同的更改，那么它将无法工作。小提琴现在具有相同的结构。所以没有混淆。谢谢Jasper，是的，更新成功了。哇，Jquery真是一个强大的工具，我需要更多的Jquery知识。也感谢大家的评论。@Laziale如果您觉得这些信息有用，请随时接受此答案和/或向上投票：）。
。最近的（）
只查看元素的祖先：
获取与选择器匹配的第一个元素，从当前元素开始，在DOM树中向上进行。
。因此，
$（this）.Closer（'select'）
不会在给定HTML结构的情况下选择任何内容。Closer:）。但是
元素没有任何同级。您可以获取
元素的父元素，然后找到它的同级元素，然后获取
元素，最后获取选定的
元素：
$（this）.parent（）.prev（）.children（）.children（':selected'）
。
@foreach (var item in Model.Names)
{
   <div class="listContainer">                        
        <div class="editor-field">
           <select multiple id="@("Select" +item.Name)" name="@("Select" +item.Name)"></select>  
        </div>
        <div>  
           <a href="#" class="remove">Remove selection</a>  
        </div>  
   </div>
}   

$('.remove').click(function(){    
    $(this).closest('.listContainer').find('select').find(':selected').remove();
});

$('.remove').click(function(){    
  $(this).closest('select').children().is(':selected').prop("selected",null);
});

$('.remove').click(function(){    
  $(this).parent().prev().find('option:selected').prop("selected",null);
});