我试图更新一个输入字段的基础上关闭什么样的图像用户点击。目前，我有一个名字和姓氏的标题图像。当用户点击图片时，名字和姓氏被插入到一个输入字段中（图片也被高亮显示，但这只是使用CSS来给予它被选中的印象）。
用户可以选择多个图像，将多个名称插入输入字段。但是，我想删除一个名字，如果图像成为黄色。

$('#userImage').click(function(e) {
    $(e.target).toggleClass('active');

    var name = $(e.target).parent().find('figcaption').text().toLowerCase();

    if($(e.target).hasClass('active')) {
        if($('.username').val() == 0) {
            $('.username').val(name);
        } else {
            if($('.username').val().indexOf(name) == -1) {
                $('.username').val($('.username').val() + "," + name);
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="userImage">
  <figure class="image">
      <img src="imgsrc">
      <figcaption>Bob Smith</figcaption>
  </figure>

  <figure class="image">
      <img src="imgsrc">
      <figcaption>John Doe</figcaption>
  </figure>
</div>

<input class="username" name="username">

代码首先检查以确保图像被选中，如果框是空的，它将插入名称，如果它已经有一个值，它然后检查以确保值没有重复并插入另一个名称。
如何删除未选中的图像的名称？