нажмите и добавьте div, но удалите его другому элементу

Question

Я пытаюсь создать скрипт, который, когда я нажимаю на список, добавляет div внутри тега <li>, этот вопрос в порядке, но моя проблема в том, что когда я нажимаю в другом <li> Мне бы хотелось удалить div перед вставленным, как я могу это сделать, и мне бы хотелось удалить класс. Благодарю.

$(document).on('click', '#horiz_container img', function() { 
      var img_selected = $(this); 
      var value_sport = img_selected.val(); 
      if (!$(this).closest('li').is('.selected')) { 

       $(this).closest('li').addClass('selected'); 
       $(this).closest('li').prepend('<div class="selected_sport"><img src="' + CI_ROOT +'resources/img/select.png"></div>'); 
      } 

     }); 

Answer 1

Попробуйте

$(document).on('click', '#horiz_container img', function() { 
    var img_selected = $(this), $li = img_selected.closest('li'); 
    var value_sport = img_selected.val(); 
    var $selected = $('#horiz_container .selected').removeClass('selected'); 
    $selected.find('.selected_sport').remove(); 

    $li.addClass('selected'); 
    $li.prepend('<div class="selected_sport"><img src="' + CI_ROOT + 'resources/img/select.png"></div>'); 

}); 

Answer 2

$(document).on('click', '#horiz_container img', function() { 
      var img_selected = $(this); 
      var value_sport = img_selected.val(); 
      if (!$(this).closest('li').is('.selected')) { 

       $(this).closest('li').addClass('selected'); 
       **$('.selected_sport').remove();** 
       $(this).closest('li').prepend('<div class="selected_sport"><img src="' + CI_ROOT +'resources/img/select.png"></div>'); 
      } 

     });