Question

单击复选框时，我要隐藏最后一个输入字段。我已经尝试过prev和closest，但是它不起作用。几乎没有其他一组同类输入字段，因此我只想针对最后一个输入字段。因此，单击此复选框后，我想隐藏最后一个输入字段job_to_date[]。下面是我的代码。

jQuery('input[name^="currently_work_here"]').change(function() {
  if (jQuery(this).is(":checked")) {
    jQuery(this).prev('.job_to_date').remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
  <input type="text" name="job_from_date[]" value="" placeholder="From" class="job_from_date">
</div>
<div class="col-sm-6">
  <input type="text" name="job_to_date[]" value="" placeholder="To" class="job_to_date">
</div>
<div class="col-sm-12">
  <input type="checkbox" name="currently_work_here[]" class="resume_builder_input input_checkbox"> I currently work here
</div>

Answer 1

根据修改后的HTML，您需要使用.parent().prev().find('.job_to_date')定位要删除的元素：

jQuery('input[name^="currently_work_here"]').change(function() {
    if(jQuery(this).is(":checked")) {
        jQuery(this).parent().prev().find('.job_to_date').remove();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
<input type="text" name="job_from_date[]" value="" placeholder="From" class="job_from_date">
</div>
<div class="col-sm-6">
<input type="text" name="job_to_date[]" value="" placeholder="To" class="job_to_date">
</div>
<div class="col-sm-12">
<input type="checkbox" name="currently_work_here[]" class="resume_builder_input input_checkbox"> I currently work here
</div>

.prev()本身不会根据您的结构工作。您需要通过.parent()上一个级别，然后使用.prev()到上一个div，最后使用.find('.job_to_date')找到要删除的一个

单击复选框，删除最后一个输入字段

1 个答案: