如何根据选中值删除URL查询字符串中的指定参数值？

你的代码存在几个关键问题导致功能失效：

• 始终使用初始的品牌值进行替换，没有实时更新当前的品牌列表，比如第一次删除1后，后续操作还是基于1,2,3处理，而非更新后的2,3
• 直接用replace方法会导致多余逗号残留（比如删除1后得到,2,3），还可能误删类似11这类包含目标值的条目
• 缺少「全部移除」按钮的处理逻辑

下面是修正后的完整代码，同时补充了全部移除功能：

修正后的HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div class="url">http://www.test.com/search?brands=1,2,3</div>
  <button type="button" data-value="1">Remove 1</button>
  <button type="button" data-value="2">Remove 2</button>
  <button type="button" data-value="3">Remove 3</button>
  <button type="button" class="remove-all">全部移除</button>
  
  <div class="newUrl"></div>
</div>

修正后的JavaScript #

$(document).ready(function(){
  // 初始化当前品牌列表：从初始URL解析并转成数组
  var initialUrl = $('.url').text();
  var urlObj = new URL(initialUrl);
  var currentBrands = urlObj.searchParams.get("brands").split(',');

  // 单个移除按钮逻辑
  $('button[data-value]').on('click', function(){
    var removeValue = $(this).data('value');
    // 过滤掉要移除的值，注意类型匹配（原数据是字符串）
    currentBrands = currentBrands.filter(item => item !== removeValue.toString());
    // 更新显示的URL
    updateDisplayUrl();
  });

  // 全部移除按钮逻辑
  $('.remove-all').on('click', function(){
    currentBrands = [];
    updateDisplayUrl();
  });

  // 统一更新URL显示的函数
  function updateDisplayUrl(){
    var brandsStr = currentBrands.join(',');
    $('.newUrl').text(`http://www.test.com/search?brands=${brandsStr}`);
  }
});

关键改进点 #

• 用数组维护当前品牌列表，避免字符串替换的各种问题，操作更精准
• 每次点击后实时更新currentBrands数组，确保后续操作基于最新状态
• 新增updateDisplayUrl函数统一处理URL拼接，避免重复代码
• 补充了「全部移除」的功能实现，符合需求

内容的提问来源于stack exchange，提问作者fikfe