オートコンプリートテキストビューから選択した値を削除機能付きdivに追加

Question

これは私の最初のWebプロジェクトです。そこに私はデータベースに接続されているtextviewを持って、それはオートコンプリートのためのフィルタを持っています。私はデータベースからデータを取得しており、オートコンプリートは非常にうまく動作しています。私があなたがそれを表示するためにdivに追加したいと思ったtextviewから項目を選択した後、それを望むもの。また、divに項目を正しく追加しています。私の問題は、ユーザーが間違った名前を誤って追加した場合、削除機能を追加できないことです。私はその名前の後に来るイメージをクリックしてその名前を削除したいと思います。私はそれらを追跡し続けるために配列（arr）に項目を追加しています。だから私は同時に（追加/削除）配列を更新したいと思います。

これは私のHTML部分です。

<legend><span class="number">2</span> Meeting Participants </legend> 

    <div class="input_container"> 
     <input type="text" id="participants_id" onkeyup="autocomplet()"> 
     <ul id="participants_list_id"></ul> 
    </div> 

<div id ="name_print_div_id" class="name_print_div" > 

</div> 

はJavaScript

var arr = new Array(); 
var xx; 
function autocomplet() { 
var wrapper = $(".input_container"); //Fields wrapper 
    var min_length = 0; // min caracters to display the autocomplete 
    var keyword = $('#participants_id').val(); 
    if (keyword.length >= min_length) { 
    $.ajax({ 
     url: 'ajax_refresh.php', 
     type: 'POST', 
     data: {keyword:keyword}, 
     success:function(data){ 
     $('#participants_list_id').show(); 
     $('#participants_list_id').html(data); 

     $('#participants_list_id li').click(function() { 

      xx = $(this).text(); 
      arr.push(xx); 
      console.log(arr); 

     $(wrapper).append('<div>' + xx + '<img src="assest/img/close2.png" width="14px" height="14px"/></a></div>'); //add input box 
      $('#participants_id').val(''); 

     }); 

     } 

    }); 
    } else { 
    $('#participants_list_id').hide(); 
    } 
} 

Answer 1

あなたの閉じるボタンでonclickイベントを追加することができます。

$(wrapper).append('<div>' + xx + '<img src="assest/img/close2.png" width="14px" height="14px" onclick="javascript:removeParticipant('"+xx+"')"/></div>'); //add input box 
      $('#participants_id').val(''); 
}); 

今

function removeParticipant(participant_id){ 
    //Removing element from array 
    var i = arr.indexOf(participant_id); 
    if(i != -1) { 
     arr.splice(i, 1); 
    } 

    //Update your div with new array elements 
}