动态添加的移除按钮点击无效，搜索历史选择功能异常

核心问题分析 #

• 类名不匹配：按钮的CSS类是remove-btn，但JS里判断的是removeBtn，大小写和连字符不一致，导致点击按钮时根本触发不了删除逻辑。
• 文本获取逻辑错误：
  • 删除时用$(event.target).prev().text()拿搜索词，但按钮是直接追加到.suggestion里的，prev()找不到对应的文本元素，自然拿不到正确内容。
  • 点击.suggestion时，$(this).text()会把按钮的"X"也包含进去，导致输入框赋值成带X的错误内容。
• 事件冒泡干扰：按钮点击会触发父元素.suggestion的点击事件，两种逻辑互相干扰，导致功能异常。

修复后的完整代码 #

HTML #

<input type="text" id="searchInput" autocomplete="off" placeholder="输入搜索关键词...">
<button id="searchBtn">搜索</button>
<div id="searchSuggestions"></div>

CSS #

#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: flex;
  align-items: center;
  justify-content: space-between;
}
.suggestion:hover {
  background-color: #eee;
}
.remove-btn{
  border: none;
  background: transparent;
  cursor: pointer;
  color: #ff4444;
}

JavaScript #

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

  // 初始化加载本地存储的历史记录
  function initHistory() {
    var storedSearchHistory = JSON.parse(localStorage.getItem('searchHistory'));
    if (storedSearchHistory !== null) {
      searchHistory = storedSearchHistory;
    }
  }
  initHistory();

  $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) {
    return searchHistory.filter(function(item) {
      return item.toLowerCase().indexOf(searchTerm) !== -1;
    });
  }

  function displaySuggestions(suggestions) {
    $searchSuggestions.empty();
    if (suggestions.length > 0) {
      $searchSuggestions.show();
      suggestions.forEach(function(item) {
        var $suggestion = $('<div class="suggestion"></div>');
        var $textSpan = $('<span class="suggestion-text">' + item + '</span>');
        var $removeButton = $('<button class="remove-btn">X</button>');
        // 把搜索词存在按钮的data属性里，删除时直接取，不用依赖DOM结构
        $removeButton.data('term', item);
        $suggestion.append($textSpan).append($removeButton);
        $searchSuggestions.append($suggestion);
      });
    } else {
      $searchSuggestions.hide();
    }
  }

  // 单独给删除按钮绑事件，阻止冒泡避免和父元素冲突
  $(document).on('click', '.remove-btn', function(event) {
    event.stopPropagation();
    var term = $(this).data('term');
    var index = searchHistory.indexOf(term);
    if (index !== -1) {
      searchHistory.splice(index, 1);
      localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
      displaySuggestions(getSuggestions($searchInput.val().toLowerCase()));
    }
  });

  // 点击搜索文本才填充输入框，避开按钮区域
  $(document).on('click', '.suggestion-text', function() {
    var term = $(this).text();
    $searchInput.val(term);
    $searchSuggestions.hide();
  });

  $searchBtn.on('click', function() {
    var searchTerm = $searchInput.val().trim();
    if (searchTerm !== '') {
      // 避免重复添加相同的搜索词
      if (!searchHistory.includes(searchTerm)) {
        searchHistory.push(searchTerm);
        localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
      }
      $searchInput.val('');
      displaySuggestions([]);
    }
  });
});

关键修复点说明 #

1. 修正类名匹配：把JS里的removeBtn改成remove-btn，和CSS类名统一。
2. 分离事件绑定：给删除按钮单独写点击事件，用event.stopPropagation()阻止冒泡，避免触发父元素的点击逻辑。
3. 可靠获取搜索词：通过data属性存搜索词，删除时直接读取，不用靠DOM结构找文本，更稳定。
4. 修复输入框赋值：把搜索文本放在单独的<span>里，只有点击这个span才填充输入框，不会把按钮的"X"带进去。
5. 加了去重逻辑：搜索时不会重复添加相同的历史记录，体验更合理。

内容的提问来源于stack exchange，提问作者Md. Ibrahim