如何使用JavaScript从元素最近的相邻input值中移除指定字符串

云上老周

2026-9-27

问题原因

你代码的问题出在两点：

DOM结构匹配错误：从你给出的HTML结构来看，.input输入框是.myBlock容器的同级兄弟元素，不是它的内部后代元素，你用find()方法是在父容器内部查找元素，自然找不到目标input。
执行顺序错误：你先执行了$('[data-id="' + id + '"]').remove()，会直接把点击的.deletImg所属的.addedImg元素从DOM树移除，此时再基于被移除的元素向上查找父级，也会定位失败。

解决方法

调整操作顺序，同时用更稳定的DOM选择方式替换硬编码的父级索引查找，修正后的代码如下：

$(document).on('click', '.deletImg', function() {
  var $this = $(this);
  var id = $this.attr('data-id');

  var removeValue = function(list, value, separator) {
    separator = separator || ",";
    var values = list.split(separator);
    for (var i = 0; i < values.length; i++) {
      if (values[i] == value) {
        values.splice(i, 1);
        return values.join(separator);
      }
    }
    return list;
  }

  // 先定位input元素，修改值
  var $input = $this.closest('.myBlock').next('.input');
  var inp = $input.val();
  inp = removeValue(inp, id);
  $input.val(inp);

  // 最后再删除对应的DOM元素
  $('[data-id="' + id + '"]').remove();
});