When querying the DOM, is there any reason why labels aren't available as children?
var el = document.getElementById("myEl");
var group = el.closest(".form-group");
var ipt = el.closest(".form-group > input");
var lbl = el.closest(".form-group > label");
console.log(ipt);
console.log(lbl);
<div class="row">
<div class="form-group col-sm-6">
<label>Name
<i class="fa fa-asterisk text-danger"></i>
</label>
<input type="text" class="form-control" id="myEl" value.bind="location.name & validate">
</div>
</div>
You need to select the parent and than look for the child, there is no way to combine it. With your code, it is looking for a parent that is an input or a label.
var el = document.getElementById("myEl");
var group = el.closest(".form-group");
var ipt = group.querySelector("input");
var lbl = group.querySelector("label");
console.log(ipt);
console.log(lbl);
<div class="row">
<div class="form-group col-sm-6">
<label>Name
<i class="fa fa-asterisk text-danger"></i>
</label>
<input type="text" class="form-control" id="myEl" value.bind="location.name & validate">
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With