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?

assume : the div with value of riskDiv_section_code=123 and riskDiv_section_name=456 — Sumon Bappi
– Sumon Bappi, Commented Nov 7, 2016 at 7:49
You can select an input by name $('input[name="riskDiv_section_code"]') then from there you can traverse up the dom tree to get where you want $('input[name="riskDiv_section_code"]').parent() it'd be easier to just add a class or id to the div or input you're trying to target - I don't entirely understand what you're trying to achieve beyond targeting the input — Brian
– Brian, Commented Nov 7, 2016 at 7:55

Satpal · Accepted Answer · 2016-11-07 07:59:03Z

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>

your code works fine but need to edit here to add quote '[name=riskDiv_section_code]' >> '[name="riskDiv_section_code"]' . And one more thing, can you please tell how to do it with css class instead of name attribute
@SumonBappi, Assuming riskDiv_section_code as CSS class $this.find('.riskDiv_section_code') api.jquery.com/class-selector

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related