jQuery cystemest()父母和父母

Question

我正在尝试清除最接近父母的输入字段和上面的输入字段。如果运行以下代码，它将清除最接近的三个字段，但不是全部六个字段。

有人能够指出我需要添加到"删除"功能的内容以实现这一目标？

谢谢

$('.hiddenDV').hide();
$(".add-another").click(function() {
  $(this).parents('.row').nextAll('.hiddenDV:lt(2)').slideDown();
});
$(".remove").click(function() {
  $(this).parent('.row').hide().prev('.hiddenDV').slideUp();
  $(this).closest(".hiddenDV").find('input[type="text"]').val('');
});

input[type=text] {
  line-break: normal;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #dcdcdc;
  background-size: 25px 25px;
  background-position: 7px 10px;
  background-repeat: no-repeat;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel-body">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="OEemployerTXB">Employer:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="OEnatureTXB">Nature of business:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label for="OEpostheldTXB">Post held:</label>
        <input type="text" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEsalaryonleavingTXB">Salary on leaving:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEdateemployedTXB">From:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEleavingdateTXB">To:</label>
        <input type="text" />
      </div>
    </div>
    <input type="button" id="btnEMPAdd1" class="btn btn-default extra-margin add-another" value="+" />
  </div>
  <div id="DV_EMP1" class="row hiddenDV">
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEemployerTXB2">Employer:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEnatureTXB2">Nature of business:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEpostheldTXB2">Post held:</label>
        <input type="text" />
      </div>
    </div>
  </div>
  <div id="DV_EMP2" class="row hiddenDV">
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEsalaryonleavingTXB2">Salary on leaving:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEdateemployedTXB2">From:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEleavingdateTXB2">To:</label>
        <input type="text" />
      </div>
    </div>
    <input type="button" id="btnEMPAdd2" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" id="btnEMPDel2" class="btn btn-default extra-margin remove" value="-" />
  </div>
  <div id="DV_EMP3" class="row hiddenDV">
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEemployerTXB3">Employer:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEnatureTXB3">Nature of business:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEpostheldTXB3">Post held:</label>
        <input type="text" />
      </div>
    </div>
  </div>
  <div id="DV_EMP4" class="row hiddenDV">
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEsalaryonleavingTXB3">Salary on leaving:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEdateemployedTXB3">From:</label>
        <input type="text" />
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="form-group">
        <label for="OEleavingdateTXB3">To:</label>
        <input type="text" />
      </div>
    </div>
    <input type="button" id="btnEMPAdd3" class="btn btn-default extra-margin add-another" value="+" />
    <input type="button" id="btnEMPDel3" class="btn btn-default extra-margin remove" value="-" />
  </div>
</div>

Answer 1

尝试使用以下代码：

$('.hiddenDV').hide();
$(".add-another").click(function() {
  $(this).parents('.row').nextAll('.hiddenDV:lt(2)').slideDown();
});
$(".remove").click(function() {
  $(this).parent('.row').hide().prev('.hiddenDV').slideUp();
  $(this).closest(".hiddenDV").find('input[type="text"]').val('');
  $(this).closest(".hiddenDV").prev(".hiddenDV").find('input[type="text"]').val('');
});

Answer 2

首先，使用：

$(".remove").on('click',function() {
});

第二，当您在：

中

$(".remove").on('click',function(){  
});

$(this( - 在" .remove"类中寻找元素，但是在您的代码中，我看不到"。

尝试添加每个"行"第二类，例如" Row Row-1"，然后：

$(".remove").on('click',function(){  
   $('.row.row-1').find('input[type=text]').each(function(){
      $(this).val('');
   });
});