Sumon Bappi Sumon Bappi - 1 month ago 7
jQuery Question

How to find a div by multiple input field's value

I have two div. Where all fields are same. But I need to get only one div based on it's two field values which are > riskDiv_section_code and riskDiv_section_name. I have the following div::

<div class="panel panel-light-grey">
<div class="panel-heading">
<h5 class="panel-title">
<a class="accordion-toggle bold" data-toggle="collapse" data-parent="#accordion" href="#section_activity_risk_block1478501245008">
<i class="icon-arrow"></i>
<span> Section : <label>abc</label>&nbsp; || <b>Activity :</b> <label>1</label>
</span>
</a>
</h5>
</div>
<div id="section_activity_risk_block1478501245008" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-md-6 form-group">
<label class="control-label">Section Code</label>
<input name="riskDiv_section_code" type="text" value="123" class="readonly form-control required" readonly="">
</div>
<div class="col-md-6 form-group">
<label class="control-label">Section Name</label>
<input name="riskDiv_section_name" type="text" value="456" class="readonly form-control required" readonly="">
</div>
</div>
</div>
</div>
<div class="panel panel-light-grey">
<div class="panel-heading">
<h5 class="panel-title">
<a class="accordion-toggle bold" data-toggle="collapse" data-parent="#accordion" href="#section_activity_risk_block1478501245008">
<i class="icon-arrow"></i>
<span> Section : <label>xyz</label>&nbsp; || <b>Activity :</b> <label>2</label>
</span>
</a>
</h5>
</div>
<div id="section_activity_risk_block1478501245008" class="panel-collapse collapse in">
<div class="panel-body">
<div class="col-md-6 form-group">
<label class="control-label">Section Code</label>
<input name="riskDiv_section_code" type="text" value="abc" class="readonly form-control required" readonly="">
</div>
<div class="col-md-6 form-group">
<label class="control-label">Section Name</label>
<input name="riskDiv_section_name" type="text" value="xyz" class="readonly form-control required" readonly="">
</div>
</div>
</div>
</div>


Can anybody please help me on this please? I have not written any code to do it. Because I have only one idea which is to loop through all div but I don't want to iterate. Can anyone provide other approach please.

Answer

You can use .filter( function ) to get the target div, then remove() can be used;

Reduce the set of matched elements to those that match the selector or pass the function's test.

var code= '123';
var name= '456';

var elemes = $('.panel').filter(function(){
    var $this = $(this);
    var riskDiv_section_code = $this.find('[name=riskDiv_section_code]').val().trim();
    var riskDiv_section_name = $this.find('[name=riskDiv_section_name]').val().trim();
    return riskDiv_section_code == code && riskDiv_section_name == name
});

elemes.remove();

jQuery(function($) {
  var code = '123';
  var name = '456';
  var elemes = $('.panel').filter(function() {
    var $this = $(this);
    var riskDiv_section_code = $this.find('[name=riskDiv_section_code]').val().trim();
    var riskDiv_section_name = $this.find('[name=riskDiv_section_name]').val().trim();
    return riskDiv_section_code == code && riskDiv_section_name == name
  });

  elemes.remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-light-grey">
  <div class="panel-heading">
    <h5 class="panel-title">
        <a class="accordion-toggle bold" data-toggle="collapse" data-parent="#accordion" href="#section_activity_risk_block1478501245008">
            <i class="icon-arrow"></i>
            <span> Section : <label>abc</label>&nbsp; || <b>Activity :</b> <label>1</label>
            </span>
        </a>
        </h5>
  </div>
  <div id="section_activity_risk_block1478501245008" class="panel-collapse collapse in">
    <div class="panel-body">
      <div class="col-md-6 form-group">
        <label class="control-label">Section Code</label>
        <input name="riskDiv_section_code" type="text" value="123" class="readonly form-control required" readonly="">
      </div>
      <div class="col-md-6 form-group">
        <label class="control-label">Section Name</label>
        <input name="riskDiv_section_name" type="text" value="456" class="readonly form-control required" readonly="">
      </div>
    </div>
  </div>
</div>
<div class="panel panel-light-grey">
  <div class="panel-heading">
    <h5 class="panel-title">
        <a class="accordion-toggle bold" data-toggle="collapse" data-parent="#accordion" href="#section_activity_risk_block1478501245008">
            <i class="icon-arrow"></i>
            <span> Section : <label>xyz</label>&nbsp; || <b>Activity :</b> <label>2</label>
            </span>
        </a>
        </h5>
  </div>
  <div id="section_activity_risk_block1478501245008" class="panel-collapse collapse in">
    <div class="panel-body">
      <div class="col-md-6 form-group">
        <label class="control-label">Section Code</label>
        <input name="riskDiv_section_code" type="text" value="abc" class="readonly form-control required" readonly="">
      </div>
      <div class="col-md-6 form-group">
        <label class="control-label">Section Name</label>
        <input name="riskDiv_section_name" type="text" value="xyz" class="readonly form-control required" readonly="">
      </div>
    </div>
  </div>
</div>