Как удалить JQuery элемент

Question

автозаполнения

Мой JQuery код:

$(function() { 
$(document).tooltip({ 
    track: true 
}); 
}); 
$(document).ready(function() { 
    $(function() { 
var availableTags = ["Bangladesh","USA","Uk","CANADA","Angola","Antigua and Barbuda","Argentina"]; 
var country; 
$("#country_name").autocomplete({ 
    source: availableTags, 
    autoFocus: true, 
    select: function(event, ui) {    
     country=ui.item.value; //$('#target').text(ui.item.value); 
     //$('#div_selected_country').text($('#div_selected_country').html()+"\n "+country); 
     $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+ 
      " <a href='?delete=1' class='del_country'>X</a></span>"+"\n "); 
     $('#hid_country_names').val($('#div_selected_country').html()); 
     if (ui.item){ 
      $(this).val(''); 
      return false; 
     } 
    } 
}); 
    }); 
}); 
$(document).ready(function() { 
//$('a.del_country').click(function(e) { 
$('a.del_country').on('click', function() { //.on in JQuery 1.9 and up instead of .live 
    alert('sumon'); 
}); 
}); 

Вот JSFiddle here

Я пытаюсь выполнить автозаполнение для списка стран, добавить по одному и показывает в другую дела. До этого момента мой код работает нормально, но мне нужно также удалить выбранные страны (один за другим).

Что я сделал, когда добавляю страну, я включаю тег span, упоминая класс; и позже, когда я пытаюсь получить доступ к этому классу с помощью jQuery, мне не удалось получить этот класс.

С моей точки зрения, мой тег span не обязательно привязан к HTML DOM, и поэтому позже он не идентифицирован.

Answer 1

Вам необходимо использовать подход делегирования событий для .on(), так как элементы с class="del_country" добавляются динамически.

$(document).on('click','a.del_country', function(e) { 
     e.preventDefault();/* prevent browser opening href url*/ 
     /* remove parent span*/ 
     $(this).parent().remove(); 
}); 

DEMO