Reputation: 2019
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> || <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> || <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?
Upvotes: 0
Views: 71
Reputation: 133453
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> || <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> || <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>
Upvotes: 2