удалить выбор из поля выбора с помощью jquery

Question

У меня есть поле выбора, из которого я хочу удалить выбранный выбор с помощью 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>
            }   

Есть три поля выбора, и для каждого мне нужно добавить гиперссылку для удаления выбора.Заранее спасибо, Лазиале

Answer 1

Рабочая скрипка

http://jsfiddle.net/GFdP6/1/

Разметка

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

JQuery

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

Answer 2

Хотите удалить выделение или выделенные элементы?

Поскольку на удаление элементов ответили, в случае, если это только выбор:

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

EDIT:

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

Answer 3

Прежде всего вы должны изменить id="remove" на class="remove", так как у вас будет несколько из этих элементов, и недопустимо, чтобы один и тот же идентификатор использовался несколько раз.

Вы можете использовать jQuery для выбора тегов привязки и привязки обработчика событий, который удаляет родительский элемент привязки (который также содержит элементы <select>):

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

Вот демоверсия: http://jsfiddle.net/7SueN/2/

Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае аналогично использованию .bind(): http://api.jquery.com/on

Если вы хотите удалить только элемент <select>, связанный с каждой ссылкой, вы можете выбрать его для удаления:

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

Вот демоверсия: http://jsfiddle.net/7SueN/1/

Обновление

Я просто перечитал ваш вопрос, и если вы хотите удалить выбранный индекс из списка, когда ссылка нажата:

$(function () {
    $('.remove').on('click', function () {

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

Вот демоверсия: http://jsfiddle.net/7SueN/