How to find element by id in Angualar's jqLite element object

Question

I'm using this:

$vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

Then at later point of time I want to locate the #pselect ID element. My $vehicleTypeDropdown looks like this which is the jqLite object:-

<select class="vehicleTypeDropdown" id="vehicleType">
<option id="#pselect" value="">Please Select</option>
<option ng-repeat="types in selectedType" value="Vt3" class="ng-scope ng-binding">vt3</option>
<option ng-repeat="types in selectedType" value="Vt4" class="ng-scope ng-binding">vt4</option>
</select>

There are two questions -

It's written in the jqLite documentation that .find() method only looks for the tags, not for classes or ids. So how do I get

$vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

as an jqLite object with the content?
And how can I find the option with #pselect? I want to remove that manually, keeping in mind that it can be in any order in the options.

Couldn't you just assign them each to a var? `var $ps = $('#pselect');` and `var $vtd = $('.vehicleTypeDropdown');` — zer00ne, Jan 24 '16 at 11:58
can you a bit explain _why_ you need this? usually when use angularjs not needed manually DOM operation — Grundy, Jan 24 '16 at 11:58
@Grundy then it's very lite on the jq, it should be called jqNot — zer00ne, Jan 24 '16 at 12:00
@zer00ne, yes, and your code in comment not work if jQuery not include — Grundy, Jan 24 '16 at 12:01
@Grundy That goes without saying, my assumptions based on my ignorance of jqLite. — zer00ne, Jan 24 '16 at 12:04
@Grundy i just want to locate that and remove it dynamically so that user not able to see the option in select. i have that element but $('.vehicleTypeDropdown').find('#pselect') is not working, even though i have the option in $('.vehicletypeDropdown') . — navtej singh, Jan 24 '16 at 12:05
**element.find(".vehicleTypeDropdown");** or **element.find("#vehicleTypeDropdown")** works as documentation says it shud'nt be — navtej singh, Jan 24 '16 at 12:08
@navtejsingh, if this _work_, so you include jQuery to your page. also can you provide working sample, for example on plunkr? — Grundy, Jan 24 '16 at 12:13
_i just want to locate that and remove it dynamically_ you can just use `ngIf` directive for this — Grundy, Jan 24 '16 at 12:14
Consider using the `ng-options` directive. In many cases, `ngRepeat` can be used on ` — georgeawg, Jan 24 '16 at 14:54

score 5 · Answer 1 · answered Jan 24 '16 at 12:36

5

Use id without # like id="pselect"

<select class="vehicleTypeDropdown" id="vehicleType">
    <option id="pselect" value="">Please Select</option>
    <option ng-repeat="types in selectedType" value="Vt3" class="ng-scope ng-binding">vt3</option>
    <option ng-repeat="types in selectedType" value="Vt4" class="ng-scope ng-binding">vt4</option>
</select>

catch element like this

var elem = angular.element(document.querySelector('#pselect'))
elem.remove()

http://jsfiddle.net/vorant/4sbux96k/1/

answered Jan 24 '16 at 12:36

vorant

650
5
15

@Grundy [This Answer](http://stackoverflow.com/a/79022/5535245) recommends avoiding the use of `#` in id attributes. It works but is not recommended. – georgeawg Jan 24 '16 at 13:58
@georgeawg, yep, i not say that this best, i just mention that with `getElementById` this work :-) – Grundy Jan 24 '16 at 14:14

Grundy · Answer 2 · 2016-01-24T12:51:55.210

How to find element by id in Angular's jqLite element object

Id should be unique on page, so you can just find it with document.getElementById, or document.querySelector and then wrap it in jqLite element.

var pselect = angular.element(document.getElementById('pselect'));

this works for:

<option id="pselect" value="">

but if you have in html:

<option id="#pselect" value="">

you should use:

var pselect = angular.element(document.getElementById('#pselect'));

i just want to locate that and remove it dynamically so that user not able to see the option in select.

in this case you can simple use ng-if directive:

<select class="vehicleTypeDropdown" id="vehicleType">
    <option id="pselect" ng-if="condition" value="">Please Select</option>
    <option ng-repeat="types in selectedType" value="Vt3" class="ng-scope ng-binding">vt3</option>
    <option ng-repeat="types in selectedType" value="Vt4" class="ng-scope ng-binding">vt4</option>
</select>

if condition true, element added in DOM, if not - not

if this code works:

$vehicleTypeDropdown = element.find(".vehicleTypeDropdown");

and you get right object, then on your page also included full jQuery, because as you can see in jqLite source, find function is simple

find: function(element, selector) {
    if (element.getElementsByTagName) {
        return element.getElementsByTagName(selector);
    } else {
        return [];
    }
},

How to find element by id in Angualar's jqLite element object

2 Answers2