자동 완성 텍스트 뷰에서 선택한 값을 제거 기능이있는 div에 추가

Question

이것은 내 첫 번째 웹 프로젝트입니다. 데이터베이스에 연결된 텍스트 뷰가 있고 자동 완성을위한 필터가 있습니다. 데이터베이스에서 데이터를 가져오고 자동 완성 기능이 잘 작동합니다. 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> 

자바 스크립트

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 
}