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

Question

This is my first web project. There I have a textview that connected to the database and it has filter for autocomplete. I am getting data from database and autocomplete working very well. What i want it after you selected an item from the textview I wanted to add that to a div to show it. I am also correctly adding items to the div. My problem is I cannot add a delete function if user accidentally add wrong name. I want to delete that name by clicking the image that come after the name. I am also adding item to an array(arr) for keep them tracking. So I wanna update the array at the same time(addition/deletion).

This is my HTML part.

<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

You can add an onclick event in your close button.

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

Now define the function as

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
}