jQuery实现点击指定按钮移除文本框中对应指定值

这是个很常见的文件关联删除需求，我给你一套直接可用的实现方案，分两步来：

第一步：确保HTML结构和按钮关联正确 #

首先得让每个删除按钮知道自己要删哪个文件，最简单的方式是给按钮加data-filename属性，把对应的文件名存进去。示例结构如下：

<!-- 每个文件的显示项，搭配删除按钮 -->
<div class="image-item">
  PRD_62533.jpg <button class="delete-btn" data-filename="PRD_62533.jpg">删除</button>
</div>
<div class="image-item">
  PRD_63335.jpg <button class="delete-btn" data-filename="PRD_63335.jpg">删除</button>
</div>
<div class="image-item">
  PRD_48298.jpg <button class="delete-btn" data-filename="PRD_48298.jpg">删除</button>
</div>
<!-- 其他文件项以此类推 -->

<!-- 你的目标文本框 -->
<input type="text" id="imageInputCurrent" value="PRD_62533.jpg,PRD_63335.jpg,PRD_48298.jpg,PRD_89675.jpg,PRD_30890.jpg">

第二步：编写jQuery处理逻辑 #

核心思路是点击按钮时，拿到要删除的文件名，把文本框里的内容拆分成数组，过滤掉目标文件名后再重新拼接回去：

$(document).ready(function() {
  // 给所有删除按钮绑定点击事件
  $('.delete-btn').on('click', function() {
    // 从按钮的data属性里获取要删除的文件名
    const targetFilename = $(this).data('filename');
    // 把文本框的值按逗号拆分成数组
    let currentFileList = $('#imageInputCurrent').val().split(',');
    // 过滤掉要删除的文件，同时处理可能存在的空格（比如文件名前后的空格）
    currentFileList = currentFileList.filter(file => file.trim() !== targetFilename.trim());
    // 把过滤后的数组重新拼成字符串，放回文本框
    $('#imageInputCurrent').val(currentFileList.join(','));
    // 可选操作：如果需要把页面上的文件显示项也删掉，加上这行
    $(this).closest('.image-item').remove();
  });
});

关键细节说明： #

• 用data-filename关联文件名，避免了硬编码，维护起来更方便
• 过滤时用trim()处理空格，防止因为文件名前后有空格导致匹配失败
• 最后可选的.closest('.image-item').remove()可以把页面上对应的文件显示元素也删掉，让界面和文本框内容保持一致

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