动态添加的jQuery输入框无法删除，求动态绑定实现方案

嘿，我帮你排查了下代码里的问题，为啥动态创建的input删不掉？核心原因是ID匹配出问题了，还有字符串拼HTML的坑，咱们来一步步搞定：

问题根源分析 #

1. ID含非法字符：你用$(this).text()生成input的ID，但文本里可能藏着空格、换行符或者特殊符号，这些字符不符合HTML的ID命名规范，导致删除时jQuery根本找不到对应的元素。
2. 字符串拼接HTML的隐患：直接用append('<input...')拼HTML很容易因为转义、特殊字符出问题，元素的属性可能悄悄出错。

解决方案 #

1. 改用jQuery安全创建元素

别再拼字符串了，用$('<input>')直接创建元素，设置属性更稳妥，还能避免字符问题：

// 创建隐藏input的部分
let inputValue = $(this).data('extension-name') || $(this).text().trim();
// 先处理文本：去空格+过滤非法字符，确保ID合法
let safeText = $(this).text().trim().replace(/[^a-zA-Z0-9-_]/g, '');
// 用jQuery方法创建元素，属性更可靠
let $input = $('<input>', {
  type: 'hidden',
  id: `callgroup${safeText}`,
  name: 'callgroup[]',
  value: inputValue,
  'data-target-text': $(this).text().trim() // 存一份原始去空格的文本，方便删除定位
});
$('#input-option-group').append($input);

2. 修正删除逻辑，精准定位元素

删除的时候不用再纠结ID，直接用自定义的data-target-text属性找元素，稳得一批：

// 删除input的部分
let targetText = $(this).text().trim();
// 通过data属性精准匹配，彻底避开ID的坑
$('#input-option-group input[data-target-text="' + targetText + '"]').remove();

完整修改后的代码

$(document).on('click', '.ms-optgroup-container', function () { 
  var $padre = $(this).parent(); // 缓存jQuery对象，减少重复DOM查询
  if ($padre.hasClass('izq')) { 
    if ($padre.hasClass('callgroup')) { 
      $(this).prependTo('#drc_callgroup'); 
      let inputValue = $(this).data('extension-name') || $(this).text().trim();
      let safeText = $(this).text().trim().replace(/[^a-zA-Z0-9-_]/g, '');
      let $input = $('<input>', {
        type: 'hidden',
        id: `callgroup${safeText}`,
        name: 'callgroup[]',
        value: inputValue,
        'data-target-text': $(this).text().trim()
      });
      $('#input-option-group').append($input);
    } 
  } else { 
    if ($padre.hasClass('callgroup')) { 
      $(this).prependTo('#izq_callgroup'); 
      let targetText = $(this).text().trim();
      $('#input-option-group input[data-target-text="' + targetText + '"]').remove();
    } 
  } 
});

额外小优化 #

• 缓存jQuery对象（比如把$(this).parent()存成$padre），减少DOM查询次数，提升性能。
• 用.data('extension-name')代替.attr('data-extension-name')，jQuery的data方法更方便处理data属性。

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