jquery nearest()父级和父级之前

时间:2017-06-27 14:49:10

标签: jquery

我正在尝试清除最近的父级和上一级的输入字段。如果您运行以下代码,它会清除最接近的三个字段,但不会清除所有六个字段。

是否有人能够指出我需要添加到我的"删除"功能实现这个?

由于



$('.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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

尝试使用以下代码:

 Assembling: abs.asm
abs.asm(3) : error A2034: must be in segment block : ABS
abs.asm(4) : error A2034: must be in segment block : $$$00001
abs.asm(4) : error A2034: must be in segment block
abs.asm(5) : error A2034: must be in segment block : $$$00001
abs.asm(5) : error A2034: must be in segment block
abs.asm(6) : error A2034: must be in segment block : $$$00001
abs.asm(6) : error A2034: must be in segment block
abs.asm(7) : error A2034: must be in segment block : $$$00001
abs.asm(7) : error A2034: must be in segment block
abs.asm(8) : error A2034: must be in segment block
abs.asm(9) : error A2034: must be in segment block : $$$00001
abs.asm(9) : error A2034: must be in segment block
abs.asm(10) : error A2034: must be in segment block
abs.asm(11) : fatal error A1010: unmatched block nesting : ABS

答案 1 :(得分:0)

首先,使用:

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

});

其次,当你在:

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

});

$(this) - 寻找&#34; .remove&#34;中的元素但是在你的代码中,我没有看到&#34;。删除&#34;作为您正在寻找的div的父级的类。

尝试添加每个&#34;行&#34;第二类,如#row; row row-1&#34;然后:

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