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

Question

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>

I have not written any code to do this task, because I have only one idea which is to loop through all div but I don't want to iterate. What other approach can I take?

Answer 1

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>