JavaScript删除函数执行效果不符合预期问题求助

先看你代码里的核心问题：$(target).remove(getWordPartInput(i))这行的用法不正确。jQuery的remove()方法如果传入参数，是选择器字符串，用来过滤要从当前匹配集合中移除的元素，但你这里传入的应该是一个DOM/jQuery对象，这就导致方法无法正确识别要删除的目标。

第一步：修正删除逻辑 #

你需要直接获取到要删除的元素，然后调用它的remove()方法，而不是通过父容器的remove()来过滤。假设getWordPartInput(i)返回的是你要删除的那个输入框元素（或者对应的jQuery对象），那修改点击事件逻辑：

function getRemoveBtn(target, i) {
  var removeBtn = $('<a/>', {
    'class': 'btn btn-danger'
  }).on('click', function() {
    // 直接获取要删除的元素并调用remove()
    $(getWordPartInput(i)).remove();
    // 如果target是该元素的父容器，也可以这样写（二选一）：
    // $(target).children().eq(i).remove();
  }).html('<i class="fa fa-minus"></i>');
  console.log(target);
  return removeBtn;
}

第二步：警惕循环绑定的作用域问题 #

如果这个getRemoveBtn是在循环里调用的（比如批量生成删除按钮），那变量i可能会因为 JavaScript 函数作用域的问题，导致所有按钮点击后都删除最后一个元素。解决这个问题可以用闭包或者ES6的let来绑定作用域：

用闭包的写法：

// 假设你是在循环里调用getRemoveBtn
for(var i = 0; i < someLength; i++){
  // 用立即执行函数包裹，绑定当前的i值
  (function(currentIndex){
    var btn = getRemoveBtn(target, currentIndex);
    // 将按钮添加到页面
    $('#some-container').append(btn);
  })(i);
}

用ES6 let的写法（更简洁）：

// 把var换成let，让i在每次循环中都是独立的块级作用域
for(let i = 0; i < someLength; i++){
  var btn = getRemoveBtn(target, i);
  $('#some-container').append(btn);
}

额外检查点 #

• 确认getWordPartInput(i)确实能正确返回要删除的元素，可以在点击事件里加console.log(getWordPartInput(i))，看看控制台输出的是不是你想要删除的DOM节点。
• 确认删除按钮的事件绑定没有被其他代码覆盖，比如有没有用off('click')意外移除了事件。

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