I'm currently in the midst of crafting a jQuery client script and my goal is to ensure it's adaptable to any situation.
One specific challenge I am facing is how to target a div with the class ".targets" when a button is clicked.
The structure of my markup is somewhat like this:
<form>
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
...
</div>
</div>
</div>
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
...
</div>
</div>
</div>
</form>
This is the jQuery code I have so far:
$("form").on("click", "btn-add", function(e){
var targets = $(this).closest(".container").find(".targets");
});
Although this solution works for now, I am concerned about potential changes in the markup.
Is there a way in jQuery to dynamically select the closest div with the class ".targets" on button click?
Appreciate your help :)