2017-03-31-how-to-pass-parameter-to-queryselector.md

layout	title	subtitle	bigimg
post	Queryselector() in functions	passing parameters to queryselector()	../img/analog.jpg

If you have to access an html element which has got additional attributes use queryselector, that's the thing now!

Suppose this is your HTML area and you want to remove an element if a condition is met:

{% highlight html %}

{% endhighlight %}

The quickest and "modern" way to locate it in the DOM is to use queryselector(), in this case we grab index 1:

{% highlight javascript %} document.querySelector("li[actionindex='1'][class='Arrow']") {% endhighlight %}

But what if we want to programmatically remove an index if a condition is met? The solution would be to locate the parent

first by using the old getElementById - don't see the reason why not in this case - and then you could use queryselector to locate the children and the index in question. Have a look below:

{% highlight javascript %} function removeIdx(idx){

var x = document.getElementById("ulClass");
x.querySelector("li[actionindex='"+ idx +"'][class='arrow']").style.display = "none";

} {% endhighlight %}

Because our actionindex places the value in "" we need to place the expression in single quotes.