JavaScript如何查找父及祖先元素外的最近input并修复更新错误

问题根源 #

你的代码存在两个核心问题：

1. 查找对应输入框的逻辑错误：硬数层级的parents().parent().eq(1)写法最终定位到了最外层的.t容器，调用find('.input')自然会匹配到页面内所有输入框，导致所有input都被修改。
2. 字符串替换逻辑不完善：直接用replace会出现残留逗号、误匹配的问题，比如id是其他id的子串时会误删，或者删除最后一个id时会留下末尾逗号。

修复方案 #

修改后的完整JS代码如下：

$('.t').append('<div class="row" style="margin-bottom:10px;"></div><div class="block block-strong myBlock"><div class="imgHolder"><div data-id="ASAS-HHH-UUU-TEY.jpg?42344444444" class="addedImg"><div class="deletImg" data-id="ASAS-HHH-UUU-TEY.jpg?42344444444">X</div><img class="tappableImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" ></div></div></div><div><input type="text" class="input" value="22,44,66,99,ASAS-HHH-UUU-TEY.jpg?42344444444"/></div><div class="row" style="margin-bottom:10px;"></div><div class="block block-strong myBlock"><div class="imgHolder"><div data-id="ASAS-HHH-UUU-TEY.jpg?423423" class="addedImg"><div class="deletImg" data-id="ASAS-HHH-UUU-TEY.jpg?423423">X</div><img class="tappableImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" ></div></div></div><div><input type="text" class="input" value="22,44,66,99,ASAS-HHH-UUU-TEY.jpg?423423"/></div>');

$(document).on('click', '.deletImg', function() {
  const id = $(this).data('id');
  // 定位当前删除按钮所属的模块容器
  const $myBlock = $(this).closest('.myBlock');
  // 查找当前模块对应的唯一输入框
  const $input = $myBlock.next().find('.input');
  // 数组过滤处理值，避免替换逻辑的bug
  const valArr = $input.val().split(',');
  const newVal = valArr.filter(item => item !== id).join(',');
  $input.val(newVal);
  // 可选：同步删除对应的图片元素
  $(this).closest('.addedImg').remove();
});

修改说明 #

• 用closest('.myBlock')向上查找最近的指定类父容器，不用硬数层级，即使后续DOM结构小幅调整也不会失效
• 用next()定位模块后面紧邻的输入框容器，只会匹配当前组对应的输入框，完全不会影响其他input
• 数组过滤的方式处理值，彻底避免replace带来的各种匹配问题，结果更可靠
• 补充了可选的图片删除逻辑，符合常规交互需求

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