jQuery实现填写car_plate输入框时清空日期输入框的问题排查

首先，你的代码没生效主要有两个核心问题：

1. closest()方法使用错误：closest()是向上查找当前元素的最近祖先节点，但#InitialDate和#FinalDate显然不是#car_plate的父/祖父元素，所以根本找不到目标元素，自然无法清空值。
2. 事件绑定不贴合需求：你用了click事件，但需求是"填写输入框时"触发操作——click只会在点击输入框时触发一次，而如果用户是通过键盘直接输入、粘贴内容等方式填写，click事件不会响应。更合适的是用input事件，它能覆盖所有输入内容变化的场景。

正确实现代码 #

场景1：#InitialDate和#FinalDate本身就是输入框的ID #

如果这两个字段是独立的input元素（比如<input id="InitialDate">），直接选中它们清空即可：

$(document).ready(function() {
  // 当car_plate输入框内容变化时触发
  $('#car_plate').on('input', function() {
    $('#InitialDate').val('');
    $('#FinalDate').val('');
  });
});

场景2：#InitialDate和#FinalDate是包含输入框的容器 #

如果这两个ID是包裹输入框的容器（比如<div id="InitialDate"><input type="date"></div>），就需要用find('input')定位容器内的输入框：

$(document).ready(function() {
  $('#car_plate').on('input', function() {
    $('#InitialDate').find('input').val('');
    $('#FinalDate').find('input').val('');
  });
});

额外优化建议 #

• 如果你只需要在第一次点击输入框时清空日期（而非每次输入都清空），可以把input事件换成focus事件，这样只会在输入框获得焦点时触发一次。
• 检查页面元素的ID是否拼写正确：ID是严格区分大小写的，确保#car_plate、#InitialDate、#FinalDate和DOM中的元素ID完全一致。

内容的提问来源于stack exchange，提问作者Ângelo Rigo