这是我的简单代码，以获得用户在某个div搜索历史记录。这返回搜索历史记录内的div和这些搜索数据保存在本地存储。我已经添加了一个关闭按钮，当用户点击这个关闭按钮，这个特定的搜索数据应该从搜索历史记录以及本地存储中删除。但为什么这个关闭按钮不工作？
另一个事实是添加了这个关闭按钮后，它甚至不能从搜索历史中点击选择。为什么会发生这种情况？
下面是我的完整代码：

$(document).ready(function() {
  var $searchInput = $('#searchInput');
  var $searchBtn = $('#searchBtn');
  var $searchSuggestions = $('#searchSuggestions');
  var searchHistory = [];

  $searchInput.on('input', function() {
    var searchTerm = $searchInput.val().toLowerCase();
    var suggestions = getSuggestions(searchTerm);
    displaySuggestions(suggestions);
  });

  $searchInput.on('focus', function() {
    var searchTerm = $searchInput.val().toLowerCase();
    var suggestions = getSuggestions(searchTerm);
    displaySuggestions(suggestions);
  });

  $(document).on('click', function(event) {
    if (!$(event.target).closest('#searchInput, #searchSuggestions').length) {
      $searchSuggestions.hide();
    }
  });

  function getSuggestions(searchTerm) {
    var storedSearchHistory = JSON.parse(localStorage.getItem('searchHistory'));
    if (storedSearchHistory !== null) {
      searchHistory = storedSearchHistory;
    }
    var filteredSearchHistory = searchHistory.filter(function(item) {
      return item.toLowerCase().indexOf(searchTerm) !== -1;
    });
    return filteredSearchHistory;
  }

function displaySuggestions(suggestions) {
  $searchSuggestions.empty();
  if (suggestions.length > 0) {
    $searchSuggestions.show();
    for (var i = 0; i < suggestions.length; i++) {
      var suggestion = $('<div class="suggestion">' + suggestions[i] + '</div>');
      var removeButton = $('<button class="remove-btn">X</button>');
      suggestion.append(removeButton);
      $searchSuggestions.append(suggestion);
    }
  } else {
    $searchSuggestions.hide();
  }
}

  $(document).on('click', '.suggestion', function(event) {
    if ($(event.target).hasClass('removeBtn')) {
      var suggestion = $(event.target).prev().text();
      var suggestionIndex = searchHistory.indexOf(suggestion);
      if (suggestionIndex !== -1) {
        searchHistory.splice(suggestionIndex, 1);
        localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
        displaySuggestions(getSuggestions($searchInput.val().toLowerCase()));
      }
    } else {
      var suggestion = $(this).text();
      $searchInput.val(suggestion);
      $searchSuggestions.hide();
    }
  });

  $searchBtn.on('click', function() {
    var searchTerm = $searchInput.val();
    if (searchTerm.trim() !== '') {
      searchHistory.push(searchTerm);
      localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
      displaySuggestions([]);
    }
  });
});

#searchInput {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 250px;
    }

    #searchBtn {
      padding: 5px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #searchBtn:hover {
      background-color: #3E8E41;
    }

    #searchSuggestions {
      position: absolute;
      width: 250px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      display: none;
      margin-top: 10px;
      padding: 6px;
    }

    .suggestion {
      padding: 5px;
      margin: 5px;
      background: #f3f3f3;
      cursor: pointer;
      border-radius: 5px;
      display: inline-block;
    }
    .suggestion:hover {
      background-color: #eee;
    }
    .remove-btn{
    border: none;
    margin-left: 5px;
    }

<input type="text" id="searchInput" autocomplete="off" placeholder="Type your search term here...">
        <button id="searchBtn">Search</button>
        <div id="searchSuggestions"></div>