如何使用jQuery移除div中指定value的隐藏input元素

核心实现思路 #

• 选中状态：向#item_list容器追加对应value的隐藏input，追加时给value属性包裹引号，避免值含空格、特殊字符时出现解析错误
• 取消选中状态：通过jQuery属性选择器，精准定位容器内name="post[]"且value与当前复选框值一致的隐藏元素，执行移除操作，不会误删其他value的隐藏域
• 选中/取消逻辑一一对应，重新勾选时会自动重新追加对应隐藏域，支持反复切换选中状态

可直接使用的完整代码 #

替换你原有代码中else块的注释部分即可，同时建议修正原追加逻辑的属性引号问题：

if(cb_new.prop('checked')) {
    // 修正原代码value属性未加引号的隐患
    $("#item_list").append(`<input type="hidden" name="post[]" value="${this.value}">`);
} else {
    // 匹配对应value的隐藏域并移除
    $("#item_list").find(`input[name="post[]"][value="${this.value}"]`).remove();
}

场景匹配验证 #

针对你给出的示例场景：

1. 初始#item_list内存在value=102、value=93两个隐藏input
2. 取消选中value=102的复选框时，选择器只会命中value=102的隐藏元素并移除，最终容器内仅保留value=93的隐藏input，完全符合预期
3. 重新勾选该复选框时，选中分支逻辑触发，会自动将value=102的隐藏input重新追加回容器

提示：如果业务中复选框的value可能包含单引号、双引号这类特殊字符，建议在拼接选择器前对value值做转义处理，常规数字、普通字符串场景下上述代码可直接运行。

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