jQuery DropDownListから項目を削除する

Question

私の見解では、Select2、空白のul要素、および隠されたListBox要素を使用するドロップダウンリストがあります。 Listbox要素は、サーバーに送信される要素です。今

<div class="form-group"> 
    @Html.Label("Grade", new { @class = "control-label col-md-2" }) 
    <div class="col-md-5"> 
     @Html.DropDownList("IPGrade", null, "-- Select a Grade --", new { id = "Grade-DDL", @class = "form-control" }) 
    </div> 
    <div class="col-md-3"> 
     <ul id="Grade-List" class="list-group"></ul> 
    </div> 
</div> 

@Html.ListBoxFor(model => model.LstGrades, new List<SelectListItem>(), new { id = "Grades-ListBox", @class = "form-control" }) 

ユーザはドロップダウンリストからオプションを選択したとき、その値はul要素とjQueryを介してリストボックス要素に取り込まれています。要素がul要素に追加されている場合、ユーザーがulとリストボックスから項目を削除できるようにするbtnも作成しています。ここに問題がある。

ユーザーがドロップダウンリストには、彼らが選択したしかし、何度も同じオプションを選択する能力を持っているので、彼らは、ドロップダウンリストからOption 1を選択した場合3回は...その後、ul要素やリストボックス要素はOption 1 3回を持っています。しかし、ユーザーがOption 1を何度も選択して、ulから1つを削除したい場合は、2が残っているので、問題がどこにあるのかがわかります。

ユーザーがul要素で繰り返されるオプションを削除しようとすると、削除をクリックすると、繰り返されているものと同じオプションがすべて削除されます。したがって、上記の例では、ユーザがOption 1のいずれかを削除しようとした場合、3つすべてが削除されますOption 1。

ここは私のjQueryです。 ULの項目とリストボックス

$("#Grade-DDL").on("select2:select", 
    function(evt) { 
     console.log(evt.params); 
     $("#Grade-List").append("<li class='list-group-item' data-id='" + 
      evt.params.data.id + 
      "' >" + 
      evt.params.data.text + 
      " <input type='button' class='btn btn-default btn-xs remove-button' style='float: right; margin-top: -2%;' value='x' /></li>"); 
     $("#Grades-ListBox") 
      .append("<option selected='true' value='" + 
       evt.params.data.id + 
       "'>" + 
       evt.params.data.text + 
       "</option>"); 
     $("#Grade-DDL").val("").change(); 
    }); 

ULから項目を削除し、リストボックスを追加

function removeGradeCapability() { 
    $("#Grade-List").on("click", 
     ".remove-button", 
     function() { 
      //alert($(this).parent().text()); 
      //alert($(this).parent().data("id")); 
      var elementId = $(this).parent().data("id"); 

      $("#Grades-ListBox option[value='" + elementId + "']").remove(); // remove item from listbox 
      $(this).parent().remove(); // remove item from ul element 
     }); 
} 

目標

ユーザーのみであること、その1つのオプションを削除それを選択してもオプションはul要素で繰り返されます...

何か助けていただければ幸いです。フィドル

更新

はここに正確に私の問題が何であるかのレプリカです！

My Fiddle

Answer 1

あなたのオプションにいくつかのユニークな識別子を追加する必要がある、またはより良い

、あなたのオプションは、EMのすべてを削除します値によってそれらを選択し、同じ値なので、確実なものを持っているようです - ハンドラを作成時に要素に追加する。

このような何か作業をする必要があります：IDについて

function(evt) { 
    console.log(evt.params); 
    $("#Grade-List").append(
    $("<li class='list-group-item' data-id='" + evt.params.data.id + "' >" + evt.params.data.text + " </li>") 
     .append(
      $("<input type='button' class='btn btn-default btn-xs remove-button' style='float: right; margin-top: -2%;' value='x' />") 
       .click(function(e){ 
        $(e.target).closest('option').remove(); 
       }) 
     ) 
); 
    $("#Grades-ListBox") 
    .append("<option selected='true' value='" + 
     evt.params.data.id + 
     "'>" + 
     evt.params.data.text + 
     "</option>"); 
    $("#Grade-DDL").val("").change(); 
}); 

：

var usedIDs = []; 
// as a concept only 
function generateId() { 
    let id = ('' + (new Date()).getTime() + (1000* Math.random())).replace('.', ''); 
    return usedIDs.indexOf(id) == -1 ? id : generateId(); 
} 

、その後で、あなたの選択：

let uid = generateId(); 
$("#Grade-List").append('<li ...tradada ... ' + 'data-uid="' + uid + '"... tradada ... </li>'); 
$("#Grades-ListBox").append("<option ...tradada ... ' + 'data-uid="' + uid + '"... tradada ... </option>'); 

finalyの削除クリックは：

$('[data-uid="' + $(e.target).data('uid')+ '"]').remove()