如何使用jQuery从逗号分隔的日期输入框中移除指定日期

我来帮你搞定这个问题！你的思路其实已经对了一半，只是在数组处理和结果回写输入框这两步没做完整，咱们一步步来修正：

先说说你现有代码的几个小问题 #

• e.preventDefault() 放在了 return false 后面，这行代码根本不会执行，因为 return false 会直接终止函数
• 把日期字符串拆成数组后，没有过滤掉要移除的目标日期
• 最后没把处理好的日期字符串写回输入框

修正后的完整代码 #

$('.input_fields_container').on("click", ".remove_field", function(e){
    // 先阻止默认事件，一定要放在前面！
    e.preventDefault();
    
    // 获取要移除的日期
    var removedate = $(this).attr('id');
    // 获取输入框当前的日期字符串
    var currentDates = $('#selecteddates').val();
    
    // 把字符串拆成数组，过滤掉要移除的日期（兼容可能的空格）
    var dateArray = currentDates.split(",").filter(function(date) {
        return date.trim() !== removedate.trim();
    });
    
    // 把过滤后的数组重新拼成逗号分隔的字符串，写回输入框
    $('#selecteddates').val(dateArray.join(","));
    
    // 移除对应的DOM元素，用closest比parent更稳妥
    $(this).closest('div fieldset').remove();
    x--;
});

关键步骤解释 #

1. 调整事件阻止顺序：把 e.preventDefault() 移到函数最开头，避免点击移除链接时触发默认跳转行为
2. 数组过滤处理：用 filter() 方法精准筛选掉和目标日期一致的元素，加 .trim() 是为了兼容日期前后可能不小心出现的空格
3. 结果回写输入框：把过滤后的数组用 join(",") 重新拼成规范的逗号分隔字符串，赋值回输入框，完成内容更新
4. 优化DOM元素移除：用 closest() 代替 parent()，它会向上查找最近的匹配元素，不管DOM结构嵌套多少层，适配性更强

这样修改后，点击移除按钮就能正确从输入框里删掉指定的日期啦！

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