<!-- Modal -->
    <div class="modal fade" id="tagModal" tabindex="-1" role="dialog" aria-labelledby="tagModalLabel" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="tagModalLabel">태그 추가</h4>
                </div>
                <div class="modal-body">
                    <input type="text" id="newTag" class="form-control" placeholder="태그를 입력하세요">
                </div>
                <div class="tag-list">
                  
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" data-backdrop="false">닫기</button>
                    <button type="button" class="btn btn-primary" ="addTag()">추가</button>
                </div>
            </div>
        </div>
    </div>
   
    <>

   
function addTag() {
    if ($('#newTag').val().trim() !== '') {
        $.ajax({
            url: 'addtag.bo',
            type: 'POST',
            data: {
                tagName: $('#newTag').val()
            },
            success: function(result) {
                console.log(result);

                if (result === 'success') {
                    var tagName = $('#newTag').val();
                    var tagItem = $('<span class="tag-item">' + tagName + '<span class="close-btn">&times;</span></span>');
                    console.log(tagItem);
                    $('.tag-list').append(tagItem);
                    $('#newTag').val('');
                }
            },
            error: function() {
                console.log('실패');
                alert('태그 추가가 실패하였습니다.');
            }
        });
    }
}

$(document).on('click', '.close-btn', function() {
    var $tagItem = $(this).closest('.tag-item');
    console.log($tagItem);
    var tagtext = $tagItem.text().trim().replace('×', '');

    $.ajax({
        url: 'removetag.bo',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            tagName: tagtext
        }),
        success: function(result) {
            console.log(result);
            console.log(tagtext);
            console.log($tagItem.text());
            if (result === 'success') {
                $tagItem.remove();
            }
        },
        error: function() {
            console.log('실패');
            console.log(tagtext);
            alert('태그 삭제에 실패하였습니다.');
        }
    });
});
</>
이게 태그를 추가하고 삭제하는 jsp

@ResponseBody
   @RequestMapping("addtag.bo")
   public String addTag(String tagName) {
      System.out.println(tagName);
       return boardService.addTag(tagName) > 0 ? "success" : "fail";
   }
  
   @ResponseBody
   @PostMapping(value = "removetag.bo", produces = "application/json; charset=UTF-8")
   public String removeTag(@RequestBody Map<String, String> requestData) {
       String tagName = requestData.get("tagName");
       System.out.println(tagName);
       System.out.println(boardService.removeTag(tagName));
       return boardService.removeTag(tagName) > 0 ? "success" : "fail";
   }
이게 그 controller부분인데 데이터베이스에 등록,삭제는 잘만되는데 태그생성할때

<div class="tag-list">

</div> 여기에 생긴 span을 &times눌러서 지우면 데이터베이스에있는 태그값은 잘지워지는데 list에서 span이 안사라짐.
뭐가잘못된거임?