使用刪除功能將自動完成文本視圖中的選定值添加到div

Question

這是我的第一個Web項目。 我有一個textview連接到數據庫，它具有自動完成過濾器。 我正在從數據庫中獲取數據，並且自動完成功能工作得很好。 從textview中選擇一個項目后，我想要什么，我想將其添加到div中以顯示它。 我也正確地將項目添加到div。 我的問題是，如果用戶不小心添加了錯誤的名稱，則無法添加刪除功能。 我想通過單擊名稱后面的圖像來刪除該名稱。 我還將項目添加到array（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
}