Javascript 使用删除功能将自动完成文本视图中的选定值添加到div

这是我的第一个网络项目。在那里我有一个连接到数据库的文本视图，它有自动完成的过滤器。我从数据库中获取数据，自动完成功能运行良好。在您从textview中选择一个项目后，我想将其添加到一个div以显示它。我还正确地将项目添加到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>

2名与会者

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();
  }
}

var arr=new Array（）；
变量xx；
函数自动完成（）{
var wrapper=$（“.input_container”）；//字段包装器
var min_length=0；//显示自动完成的最小字符数
var关键字=$（“#参与者_id”）.val（）；
如果（关键字.length>=最小长度）{
$.ajax({
url:'ajax_refresh.php'，
键入：“POST”，
数据：{关键字：关键字}，
成功：功能（数据）{
$（“#参与者列表_id”）.show（）；
$（'#参与者列表_id'）.html（数据）；
$（“#参与者列表_id li”）。单击（函数（）{
xx=$（this.text（）；
arr.push（xx）；
控制台日志（arr）；
$（包装器）.append（“”+xx+“”）；//添加输入框
$（'参与者id'）.val（''）；
});
}
});
}否则{
$（“#参与者列表_id”）.hide（）；
}
}

您可以在关闭按钮中添加一个

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
}